如何使用谷歌地图“Marker Clusterer Plus”

Question

我正在使用这个例子：

 var locations = [ ['Location 1 Name', 'New York, NY', 'Location 1 URL'], ['Location 2 Name', 'Newark, NJ', 'Location 2 URL'], ['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL'] ]; var geocoder; var map; var bounds = new google.maps.LatLngBounds(); function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocodeAddress(locations, i); } } google.maps.event.addDomListener(window, "load", initialize); function geocodeAddress(locations, i) { var title = locations[i][0]; var address = locations[i][1]; var url = locations[i][2]; geocoder.geocode({ 'address': locations[i][1] }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) infoWindow(marker, map, title, address, url); bounds.extend(marker.getPosition()); map.fitBounds(bounds); } else { alert("geocode of " + address + " failed:" + status); } }); } function infoWindow(marker, map, title, address, url) { google.maps.event.addListener(marker, 'click', function () { var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>"; iw = new google.maps.InfoWindow({ content: html, maxWidth: 350 }); iw.open(map, marker); }); } function createMarker(results) { var marker = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }) bounds.extend(marker.getPosition()); map.fitBounds(bounds); infoWindow(marker, map, title, address, url); return marker; }

 html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script> <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

我想使用 Marker Clusterer Plus，但我不知道把它放在这个脚本的什么地方。 这里： 原始

我没做这个。 我在互联网上找到了它并且它正在工作，只是不知道把那个幸运的 Marker Clusterer Plus 放在哪里。

你能帮助我吗？

Answer 1

相关问题：

• 通过 JSON 创建的标记不会与 Google Maps MarkerClusterer 聚类
• MarkerClusterer - 关联数组

一种选择是在全局范围内创建 MarkerClusterer，然后在创建标记时将标记添加到地理编码器回调函数中的聚类器中。

在初始化函数中：

clusterer = new MarkerClusterer(map, [], {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

然后在地理编码器回调中：

clusterer.addMarker(marker);

代码片段：

 var locations = [ ['Location 1 Name', 'New York, NY', 'Location 1 URL'], ['Location 2 Name', 'Newark, NJ', 'Location 2 URL'], ['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL'], ['Location 4 Name', 'Trenton, NJ', 'Location 4 URL'], ['Location 5 Name', 'Philadelphia, PA', 'Location 5 URL'], ['Location 6 Name', 'Jersey City, NJ', 'Location 6 URL'] ]; var geocoder; var map; var bounds = new google.maps.LatLngBounds(); var clusterer; function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); clusterer = new MarkerClusterer(map, [], { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); geocoder = new google.maps.Geocoder(); for (i = 0; i < locations.length; i++) { geocodeAddress(locations, i); } } google.maps.event.addDomListener(window, "load", initialize); function geocodeAddress(locations, i) { var title = locations[i][0]; var address = locations[i][1]; var url = locations[i][2]; geocoder.geocode({ 'address': locations[i][1] }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png', map: map, position: results[0].geometry.location, title: title, animation: google.maps.Animation.DROP, address: address, url: url }); clusterer.addMarker(marker); infoWindow(marker, map, title, address, url); bounds.extend(marker.getPosition()); map.fitBounds(bounds); } else { alert("geocode of " + address + " failed:" + status); } }); } function infoWindow(marker, map, title, address, url) { google.maps.event.addListener(marker, 'click', function() { var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>"; iw = new google.maps.InfoWindow({ content: html, maxWidth: 350 }); iw.open(map, marker); }); }

 html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script> <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>