自定义信息窗口内容 > Google 地图

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...如果这很重要的话？

我知道我还差得很远。任何帮助或指导将不胜感激。

提前致谢。

@rr Five

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);
    });
} 

我不确定您从哪里获取地址详细信息 - 在我的示例中，我只是使用您传递给“标题”属性的数组的相同部分，然后将其显示在信息窗口中。您可能必须使用地理编码器服务来查找每个 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');
}