簡體   English   中英

單個Google Maps標記的多個信息窗口

[英]Multiple Infowindows for a Single Google Maps Marker

有沒有一種方法可以為單個Google地圖標記創建多個信息窗口?

例如,如果一年中有幾次交付到同一地址,是否可以從該標記在可滾動的信息窗口中顯示每個交付的屬性?

否則,我最終會做一些非常臟的AJAX。

從理論上講,我只想創建一個contentString數組,如Google的修改示例所示。 理想情況下,它將在信息窗口中顯示為可導航的輪播。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  **var contentString = ['contentString1','contentString2','contentString3'];**

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

單個標記的簡單概念證明,單擊“下一個”按鈕時,將遍歷字符串數組:

 function initMap() { var uluru = { lat: -25.363, lng: 131.044 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); infowindow = new google.maps.InfoWindow({ content: contentString[0] + "<br><input type='button' onclick='next(1);' value='next' />" }); var marker = new google.maps.Marker({ position: uluru, map: map, title: 'Uluru (Ayers Rock)' }); marker.addListener('click', function() { infowindow.open(map, marker); }); map.addListener('click', function() { infowindow.close(); }); } var contentString = ['contentString1', 'contentString2', 'contentString3']; var infowindow; function next(i) { var next = i + 1; if (next >= contentString.length) { next = 0; } infowindow.setContent(contentString[i] + "<br><input type='button' onclick='next(" + next + ");' value='next' />") } google.maps.event.addDomListener(window, "load", initMap); 
 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 
 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM