如何在 Google Maps Web API 上设置集群

Question

我正在尝试将集群添加到 Google Maps web 项目，但到目前为止还没有成功。这是有效的：

添加了一些标记
请求的用户位置（代码已删除）。

markercluster.js是从GitHub项目下载的库文件，保存在public.html文件中

为了安全起见，我删除了 API 密钥。

JavaScript HTML 正文中的代码

    var userPosition;

    var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {

        //center: {lat: -34.928499, lng: 138.600746},
        center: {lat: -33.86882, lng: 151.209296},
    zoom: 13
        });

var markers = [
    {coords:{lat:-34.923885, lng:138.562042}, content:'<p><strong>British Raj</strong></p>'},
    {coords:{lat:-34.924476, lng:138.561141}, content:'<p><strong>Subway (Torrensville)</strong></p>'},
    {coords:{lat:-34.843645, lng:138.507653}, content:'<p>Banyan Hotel Port Adelaide</p>'},
    {coords:{lat:-34.92366, lng:138.567063}, content:'<p>Abyssinian Restaurant</p>'},
    {coords:{lat:-34.923927, lng:138.561959}, content:'<p>Burger Foundry (Torrensville)</p>'}

];

var gmarkers = [];
for(var i = 0; i < markers.length; i++){
    //addMarker(markers[i]);
    gmarkers.push(addMarker(markers[i]));
}

function addMarker(props){
    var marker = new google.maps.Marker({
    position:props.coords,
    map:map,
    icon:'Layer 1.png'
});

if (props.content){
    var infoWindow = new google.maps.InfoWindow({
    content:props.content
});

    marker.addListener('click', function(){
    infoWindow.open(map, marker);
    });
    }
  } 

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

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap"
async defer></script>
<script src="markercluster.js"></stript>

CSS

html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#map {
    height: 80%;
    weidth: 80%;
}

Answer 1

您的代码存在几个问题：

MarkerClusterer 的创建在 initMap 函数之外，因此它在 API 加载之前运行。将其移动到 initMap 函数中。
addMarker 函数不会 return 任何东西，因此每次创建标记时，您都会将“未定义”添加到 gmarkers 数组（添加：return marker; 到函数结束).
基于the example in the documentation，您需要在 Google Maps JavaScript API v3.[=23 之前加载 markerclusterer.js =]

proof of concept fiddle

代码片段：

var userPosition;
var gmarkers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {

    //center: {lat: -34.928499, lng: 138.600746},
    center: {
      lat: -33.86882,
      lng: 151.209296
    },
    zoom: 13
  });

var markers = [
    {coords:{lat:-34.923885, lng:138.562042}, content:'<p><strong>British Raj</strong></p>'},
    {coords:{lat:-34.924476, lng:138.561141}, content:'<p><strong>Subway (Torrensville)</strong></p>'},
    {coords:{lat:-34.843645, lng:138.507653}, content:'<p>Banyan Hotel Port Adelaide</p>'},
    {coords:{lat:-34.92366, lng:138.567063}, content:'<p>Abyssinian Restaurant</p>'},
    {coords:{lat:-34.923927, lng:138.561959}, content:'<p>Burger Foundry (Torrensville)</p>'}

];

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    //addMarker(markers[i]);
    gmarkers.push(addMarker(markers[i]));
    bounds.extend(markers[i].coords);
  }
  map.fitBounds(bounds);

  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map,
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });

      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
    }
    return marker;
  }
  var markerCluster = new MarkerClusterer(map, gmarkers, {
    imagePath: 'https://unpkg.com/@google/markerclustererplus@4.0.1/images/m'
  });

}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

如何在 Google Maps Web API 上设置集群

How do I Set Up Clustering on Google Maps Web API

api

google-maps

markerclusterer