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

Question

我正在尝试将群集添加到Google Maps Web项目中，但到目前为止还没有运气。这是工作原理：

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

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

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

HTML正文中的JavaScript代码

    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

您的代码有几个问题：

1. MarkerClusterer的创建不在initMap函数的范围内，因此它将在加载API之前运行。将其移到initMap功能内。

2. addMarker函数不返回任何内容，因此，每次创建标记时，都将[undefined]添加到gmarkers数组（将return marker;添加到函数的末尾）。

3. 基于the example in the documentation，您需要在Google Maps JavaScript API v3之前加载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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.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>