Question

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

如果有人可以提供帮助，可能会调整我的脚本以包含上面列出的所有内容，我会非常感激！

此脚本最终还将扩展到包含超过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>

提前致谢！

Answer 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

Answer 2

哇哇哇哇哇谢谢你！虽然你有可能解释我如何为每个标记创建一个信息窗口，以便不是说'标记号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'],

然而它只是在信息窗口上显示'标记号:(输入的文字）'。

再次感谢您的帮助，您将大力帮助我！

Google Maps JS API v3-标记Clusterer / Marker图标/信息窗口

2 个答案: