Google Maps JS API v3-Marker Clusterer/Marker Icon/Info 窗口答案

【问题标题】：Google Maps JS API v3- Marker Clusterer/ Marker Icon/ Info windowsGoogle Maps JS API v3-Marker Clusterer/Marker Icon/Info 窗口
【发布时间】：2014-12-02 03:16:02
【问题描述】：

在我开始之前，让我解释一下我是 Javascript 和 Google Maps API 的新手，所以我要问的问题对于那些知识渊博、经验丰富的脚本编写者来说可能非常简单！基本上我已经开始编写一个脚本来在英国地图上显示多个标记。我想我已经找到了一种方法（当前脚本要遵循），但是除了将标记图标更改为图像之外，我还想添加标记聚类器功能（以便一定距离内的点聚集在一起）我已经存档了。最后，除了添加点之外，我还想为每个标记添加一个信息窗口。此窗口需要能够显示图像和文本。

如果有人可以提供帮助并调整我的脚本以包含上面列出的所有内容，我将不胜感激！

这个脚本最终也将被扩大到包含超过 1000 个标记，所以如果有人可以提供帮助，他们也可以添加一个注释，说明我将在哪里包含图标的图像文件/新信息窗口脚本将在哪里去（当我添加到每个标记时）那就太棒了！

这是我目前拥有的脚本：

 <!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: 1000px; height: 800px;"></div>

<script type="text/javascript">
var locations = [
  ['1', 53.682401, -1.498260, 4],
  ['2', 53.681844, -1.496072, 5],
  ['4', 53.690408, -1.628518, 2],
  ['5', 53.713762, -1.632297, 1],
  ['6', 50.466238, -3.528505, 1],
  ['7', 50.435496, -3.566492, 1],
  ['8', 50.546012, -3.496630, 1],
  ['9', 50.529788, -3.611082, 1],
  ['10', 50.620188, -3.411804, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
  center: new google.maps.LatLng(54.664097, -2.752708),
  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>

提前致谢！

【问题讨论】：

标签： java javascript jquery api google-maps-api-3

【解决方案1】：

//array to store the markers - to cluster them
var markers = [];
// i have added an image to each marker
var locations = [
  ['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['2', 53.681844, -1.496072, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['4', 53.690408, -1.628518, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['5', 53.713762, -1.632297, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['6', 50.466238, -3.528505, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['7', 50.435496, -3.566492, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['8', 50.546012, -3.496630, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['9', 50.529788, -3.611082, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],
  ['10', 50.620188, -3.411804, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png']
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 6,
  center: new google.maps.LatLng(54.664097, -2.752708),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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,
   icon: locations[i][4]
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent('marker number: ' +locations[i][0] +'<br/><IMG SRC=" '+locations[i][4] +'">');
        infowindow.open(map, marker);
    }
  })(marker, i));

// add marker to array
 markers.push(marker);   
 }
// create cluster
var markerCluster = new MarkerClusterer(map, markers);

更新的小提琴： http://jsfiddle.net/iambnz/pfa4w0w5/

文档：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

https://developers.google.com/maps/documentation/javascript/markers?hl=de#simple_icons

【讨论】：

哇，bnz 太棒了，谢谢！尽管您是否可以解释我如何为每个标记创建一个信息窗口，这样我就可以在其中放置我自己的可编辑文本甚至图像，而不是说“标记编号 x”？我已经输入了一些我认为它会去的文本（在脚本这部分的 1,2,3 等之后：var locations = [ ['1', 53.682401, -1.498260, 4, 'google-developers.appspot.com/maps/documentation/javascript/…, 但是它只是在信息窗口上说“标记号：（输入的文本）”。
欢迎 - 代码已更新，现在每次单击标记时，都会使用您的位置数组中的数据创建一个新的信息窗口。我使用标记号和图像显示在信息窗口中，表示位置 [0] AND [4]。

【解决方案2】：

哇 bnz 太棒了，谢谢！虽然您是否可以解释我如何为每个标记创建一个信息窗口，这样我就可以在其中放置我自己的可编辑文本甚至是图像，而不是说“标记编号 x”？

我已经输入了一些我认为会出现的文本（在这部分脚本的 1、2、3 等之后：

var locations = [
['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],

但它只是在信息窗口上显示“标记号：（输入的文本）”。

再次感谢您的帮助，您对我的帮助很大！

【讨论】：