Question

我希望能够在Google地图中为气泡添加自定义信息。如何使用此代码完成此操作？

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
 <script type="text/javascript">
     var locations = [
     ['Bondi Beach', -33.890542, 151.274856, 4],
     ['Coogee Beach', -33.923036, 151.259052, 5],
     ['Cronulla Beach', -34.028249, 151.157507, 3],
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>
</body>
</html>

Answer 1

你的代码看起来对我很好。不过，有很多方法可以进一步扩展它。这是一种方式：

向您的位置变量添加更多信息，以包含自定义信息中的信息，例如，指向图片的链接。

var locations = [
```
['Bondi Beach', -33.890542, 151.274856, 4, "http://mysite.com/images/beach.jpg"],

...
```
];
然后创建一个函数，为信息窗口提供他们需要的html格式。这个函数从实际的html中拉出html可能会更好，或者可能是从服务器通过ajax一次，但为了保持这个例子的简单，我将编写html内联：

function formatLocation（loc，img）{
```
return "<img src='" + img + "' title=''> <b>" + loc + "</b>";
```
}
然后，当您设置信息窗口内容时，只需使用所需参数调用此函数：

infowindow.setContent（formatLocation（locations [i] [0]，locations [i] [4]））;

希望有所帮助！

将自定义信息添加到Google地图信息窗口

1 个答案: