javascript - 使用 JSON 多标记在 Google map 上进行标记聚类

Question

我已经从 JSON 文件创建了一个带有多个标记的 map 。我正在尝试添加标记簇，但最终结果是簇和标记同时显示。 这就是我现在看到的:

我已将以下脚本添加到我的 index.html 页面中:

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

这是我的maps.js 文件的相关部分:

    let map;
let jsonData = "assets/Data/maps.json";

const countries = [
    { lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
    //Brazil
    { lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];


function initMap() {
    const mapOptions = {
        center: {
            lat: 9.072264,
            lng: 7.491302
        },
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    countries.forEach(function (data) {
        let countriesMarker = new google.maps.Marker({
            map: map,
            position: { lat: data.lat, lng: data.lng },
            title: data.name
        });
        $("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
    });


    let infowindow = new google.maps.InfoWindow();

    //Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
    $.getJSON(jsonData, function (jsonMarkers) {
        $.each(jsonMarkers.markers, function (key, data) {
            let latLng = new google.maps.LatLng(data.lat, data.lng);
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.title
            });

            var clusterMarkers = jsonMarkers.markers.map(function (location) {
                return new google.maps.Marker({
                    position: location
                });
            });
            var markerCluster = new MarkerClusterer(map, clusterMarkers,
                { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

        });

    });
}

Answer 1

您有多个问题。

1. 由于 @xomena 表示您要创建标记两次，因此请删除其中一组代码。

2. 您正在为每个标记创建一个 MarkerClusterer。将 MarkerClusterer 的创建移出创建标记的循环。

这样的事情应该有效:

$.each(jsonMarkers.markers, function (key, data) {
  let latLng = new google.maps.LatLng(data.lat, data.lng);
  let marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
  });
  clusterMarkers.push(marker);
});
var markerCluster = new MarkerClusterer(map, clusterMarkers,
  { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

proof of concept fiddle

代码片段:

 let map;
let jsonData = "assets/Data/maps.json";

const countries = [
    { lat: 48.857497, lng: 2.347628, zoom: 5, name: "France" },
    //Brazil
    { lat: -15.793889, lng: -47.882778, zoom: 5, name: "Brazil" }
];


function initMap() {
    const mapOptions = {
        center: {
            lat: -19.072264,
            lng: 117.491302
        },
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    countries.forEach(function (data) {
        let countriesMarker = new google.maps.Marker({
            map: map,
            position: { lat: data.lat, lng: data.lng },
            title: data.name
        });
        $("#selectlocation").append('<option value="' + [data.lat, data.lng, data.zoom].join('|') + '">' + data.name + '</option>');
    });


    let infowindow = new google.maps.InfoWindow();
    let clusterMarkers = [];
    //Method found on StackOverflow: https://stackoverflow.com/questions/28606149/load-data-from-json-file-into-map-markers-in-google-maps
    // $.getJSON(jsonData, function (jsonMarkers) {
    var jsonMarkers = {markers: [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]};
        $.each(jsonMarkers.markers, function (key, data) {
            let latLng = new google.maps.LatLng(data.lat, data.lng);
            if (!data.title)
              data.title = ""+key;
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.title
            });

            clusterMarkers.push(marker);
        });
        var markerCluster = new MarkerClusterer(map, clusterMarkers,
          { 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>