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

在我开始之前，让我解释一下，我是JavaScript和Google Maps API的新手，所以我要问的内容可能对您非常简单，经验丰富的剧本作家！基本上我已经开始编写脚本在英国地图上显示多个标记。我想我已经发现了一种做法（当前的脚本），但是我还想添加标记聚类器函数（以便某个距离聚类内的点聚集在一起），除了将标记图标更改为图像我保存在文件中。最后，除了添加点之外，我还想为每个标记添加一个信息窗口。此窗口需要能够显示图像和文本。Google Maps JS API v3- Marker Clusterer/Marker图标/信息窗口

如果有人在那里谁可以帮助，也许调整我的脚本，包括上面列出的所有东西，我真的很感激它！

此脚本最终也将被放大以包含超过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>

提前感谢！

来源

2014-10-07 Jonny Payne

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

文档：

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

来源

2014-10-07 17:38:34 devbnz

哇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']，但是它只是在信息窗口中显示'标记号：（输入文本）' – 2014-10-08 09:29:49

欢迎 - 代码已更新，现在每次点击标记时，都会创建一个新的infowindow，其中包含位置数组中的数据。我使用标记编号以及图像在infowindow中显示，意思是位置[0]和[4 ]。 – devbnz 2014-10-08 11:34:41

哇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'],

但它只是说“标记编号：（输入的文本） “在信息窗口。

再次感谢曾经对你的帮助，你都在大规模帮我！

来源

2014-10-08 09:27:35

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

回答

相关问题