制作集群谷歌地图

Question

我有一个谷歌地图，上面有多个标记，它们之间画了线。我希望这张地图是聚类的。

我尝试了以下代码：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript">
function InitializeMap() {
var ltlng = [];
ltlng.push(new google.maps.LatLng(29.392498333333332,71.69455666666666));
ltlng.push(new google.maps.LatLng(29.392564999999998,71.69445666666667));
ltlng.push(new google.maps.LatLng(29.400855,71.66181499999999));
ltlng.push(new google.maps.LatLng(29.392459999999996,71.69463));
ltlng.push(new google.maps.LatLng(29.392541666666663,71.69443333333334));
var myOptions = {
zoom: 15,
//center: latlng,
center: ltlng[0],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0; i < ltlng.length; i++) {
var marker = new google.maps.Marker
(
{
// position: new google.maps.LatLng(-34.397, 150.644),
position: ltlng[i],
map: map,
title: 'Click me'
}
);
}        

var flightPath = new google.maps.Polyline({
path: ltlng,
geodesic: true,
strokeColor: '#4986E7',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
this.markers = data.map((location) => {
if (location.location === null) return
const marker = new google.maps.Marker({
position: { lat: location.location.coordinates[0], lng: location.location.coordinates[1]},
map: this.map
});
return marker
});
const markerCluster = new MarkerClusterer(this.map, this.markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
window.onload = InitializeMap;
</script>
<h2>Creating Your First Google Map Demo:</h2>
<div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
</div>

我经历了以下几点：

https://developers.google.com/maps/documentation/javascript/marker-clustering 谷歌地图集群器

谷歌地图集群器

但它不起作用。

请帮我解决这个问题

谢谢

Answer 1

这是最终答案：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=map_init"></script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript">
function InitializeMap() {
var ltlng = [];    
ltlng.push(new google.maps.LatLng(29.392498333333332,71.69455666666666));
ltlng.push(new google.maps.LatLng(29.392564999999998,71.69445666666667));
ltlng.push(new google.maps.LatLng(29.400855,71.66181499999999));
ltlng.push(new google.maps.LatLng(29.392459999999996,71.69463));
ltlng.push(new google.maps.LatLng(29.392541666666663,71.69443333333334));
var myOptions = {
zoom: 15,
//center: latlng,
center: ltlng[0],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = []; 
for (var i = 0; i < ltlng.length; i++)
{
var marker = new google.maps.Marker
(
{
// position: new google.maps.LatLng(-34.397, 150.644),
position: ltlng[i],
map: map,
title: 'Click me'
}
);
markers.push(marker);
}                
var flightPath = new google.maps.Polyline({
path: ltlng,
geodesic: true,
strokeColor: '#4986E7',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);

var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
window.onload = InitializeMap;
</script>
<h2>Creating Your First Google Map Demo:</h2>
<div id="map" style="width: 800px; top: 68px; left: 172px; position: absolute; height: 500px">
</div>
</asp:Content>

我添加了标记数组，并在循环时将所有标记保存在数组中。 然后在调用聚类方法时使用此标记数组。