Google Maps JS API v3-标记群集器/标记图标/信息窗口

Question

Before i begin let me explain that i am a newbie to Javascript and Google Maps API, and so what i am about to ask may be very simple to you knowledgeable, experienced script writers out there! 在开始之前，让我解释一下我是Javascript和Google Maps API的新手，所以对于您那些知识渊博，经验丰富的脚本编写者来说，我要问的内容可能非常简单！ Basically i have begun writing a script to show multiple markers on a map of the UK. 基本上，我已经开始编写脚本以在英国地图上显示多个标记。 I think i have discovered a way of doing this (current script to follow), however i would also like to add the marker clusterer function (so that points within a certain distance cluster together), in addition to changing the marker icon to an image i have saved on file. 我想我已经找到了一种方法（当前要执行的脚本），但是除了将标记图标更改为图像之外，我还想添加标记聚类器功能（以便将一定距离内的点指向一起）我已经保存了文件。 Finally as well as just adding the points i would also like to add an Info Window to every marker. 最后，除了添加点外，我还想向每个标记添加一个信息窗口。 This window needs to be able to display an image and text. 该窗口必须能够显示图像和文本。

If there is anyone out there who can help and maybe tweak my script to include everything listed above i would really appreciate it! 如果有人可以提供帮助，甚至可以调整我的脚本以包括上面列出的所有内容，我将非常感谢！

This script will also be scaled up eventually to include over 1000 markers, so if anyone can help and they could also perhaps add a note as to where i would include the image file for the icon/ where the new info window script would go (as i add to each marker) then it would be super! 该脚本最终还将进行扩展，以包括1000多个标记，因此，如果有人可以提供帮助，他们也可能会添加一条注释，说明我将在其中包含图标的图像文件的位置/新信息窗口脚本的位置（如我添加到每个标记），那就太好了！

This is the script as i currently have it: 这是我目前拥有的脚本：

 <!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>

Thanks in advance! 提前致谢！

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

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

docs: docs：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html 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 https://developers.google.com/maps/documentation/javascript/markers?hl=de#simple_icons

Answer 2

Wow bnz that is brilliant thank you! 太棒了，谢谢！ Although would it be possible for you to explain how I could create an info window for each marker so that rather than saying 'marker number x' I can put my own editable text in there and perhaps even an image? 虽然您可以解释如何为每个标记创建一个信息窗口，以便不必说“标记号x”，而可以在其中放置我自己的可编辑文本，甚至是图像，但是，这是可能的？

I have inputted some text where I think it would go (after the 1,2,3 etc of this part of the script: 我输入了一些我认为会去的文本（在脚本这一部分的1,2,3等之后：

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

however it just says 'marker number: (inputted text)' on the info window. 但是它仅在信息窗口上显示“标记编号：（输入的文本）”。

Thanks again once for your help you are helped me massively! 再次感谢您的帮助，您得到了极大的帮助！

Google Maps JS API v3-标记群集器/标记图标/信息窗口

问题描述

2 个解决方案

解决方案1
0 2014-10-07 17:38:34

解决方案2
0 2014-10-08 09:27:35

Google Maps JS API v3-标记群集器/标记图标/信息窗口

问题描述

2 个解决方案

解决方案1 0 2014-10-07 17:38:34

解决方案2 0 2014-10-08 09:27:35

解决方案1
0 2014-10-07 17:38:34

解决方案2
0 2014-10-08 09:27:35