自定義InfoWindow內容> Google Maps

Question

我正在使用Google Maps API的位置圖。 理想的結果是：

1. 具有多個位置的地圖（已完成，經過測試，可以根據需要運行）。
2. 定制引腳（完成，測試，按需工作）。

---我不知道的事情---

1. 信息窗口中的自定義內容（單擊圖釘，信息窗口隨即打開，其中包含名稱，地址等信息。）
2. 位置列表中的鏈接，用於定位地圖並打開信息窗口。

到目前為止的JavaScript：

 function initialize() { var myOptions = { zoom: 11, center: new google.maps.LatLng(-33.802544,151.20203), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); setMarkers(map, lianaraine); } var lianaLocations = [ ['1', -33.750829,151.24086, 1], ['2', -33.846405,151.211677, 2], ['3', -33.876321,151.241171, 3], ['4', -33.871511,151.159599, 4], ['5', -33.901535,151.161743, 5], ['5', -33.676461,151.304244, 6] ]; function setMarkers(map, locations) { var image = new google.maps.MarkerImage('images/icon_mapPin.png', new google.maps.Size(30, 40), new google.maps.Point(0,0), new google.maps.Point(0, 40)); var shadow = new google.maps.MarkerImage('images/icon_mapPin_shadow.png', new google.maps.Size(26, 20), new google.maps.Point(0,0), new google.maps.Point(-13,21)); var shape = { coord: [1, 1, 1, 40, 30, 40, 30 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var liana = locations[i]; var myLatLng = new google.maps.LatLng(liana[1], liana[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: liana[0], zIndex: liana[3] }); } } 

我正在使用V3 ...如果重要嗎？

我知道我還有一段很長的路要走。 任何幫助或指示，將不勝感激。

提前致謝。

@rrfive

Answer 1

因此，您想要做的是擁有一個信息窗口，但是每個標記都會獲得不同的內容。 也就是說，內容及其位置會根據用戶的點擊而變化。 因此，在創建標記的循環中，您還想創建自己的信息窗口。 但是，您需要將其分離到另一個函數中，否則最終將導致每個信息窗口僅包含最后一個標記的內容的情況。

function setMarkers(map, locations) {
  ...
  var infowindow =  new google.maps.InfoWindow({
    content: ''
  });

  for (var i = 0; i < locations.length; i++) {
    var liana = locations[i];
    var myLatLng = new google.maps.LatLng(liana[1], liana[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: liana[0],
      zIndex: liana[3]
    });

    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, "<p>" + liana[0] + "</p>");
  }
}

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

我不確定您從何處獲取地址詳細信息-在我的示例中，我只是使用傳遞給'title'屬性的數組的同一部分，然后將其顯示在信息窗口中。 可能您必須使用Geocoder服務來查找每個latLng的地址，然后可以將其作為數組中的附加列。

更新 ：如果您隨后需要像單擊標記一樣具有正常的鏈接觸發器，那么您需要做的就是將標記放置在數組中（將其設置為全局變量，在創建標記后將其推入數組） 。 單擊鏈接將調用javascript函數，並傳入數字以標識要使用數組中的哪個元素。 然后您“觸發”該標記的單擊，例如

<a href="#" onclick="showWindow(0); return false">One</a>
<a href="#" onclick="showWindow(1); return false">Two</a>

function showWindow(id) {
    google.maps.event.trigger(markersArray[id], 'click');
}