MarkerClusterer 未显示在我的地图中

Question

在询问了我和我的朋友关于标记聚类的这个问题之后，但我们没有找到解决我们问题的方法。显然是因为我们没有提供一个最小的、完整的和可验证的例子来证明我的问题。所以在学习了我如何提供一个最小的、完整的和可验证的例子之后，我再次问你这个问题，不幸的是我在 2 周内。

问题是：我正在尝试使用 MarkerClusterer 在 Google 地图上将我的点聚集在一起。出于某种原因，该地图可以工作，但只显示单个标记并且不会将它们聚集在一起，我无法弄清楚为什么。任何帮助将不胜感激。

Answer 1

您在填充 markersArray 之前创建 MarkerClusterer。

最简单的解决方案，在初始化地图时创建一个全局 markerCluster，然后使用在 createMarker 函数中创建的每个标记填充它。

function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added) {

  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    title: CodeClient
  });

  markerArray.push(marker); //push local var marker into global array
  // add marker to the MarkerClusterer
  markerCluster.addMarker(marker);
// ....

工作代码片段：

// necessary variables
var map;
var infoWindow;
var markersData = [];
var markerCluster;
var markerArray = []; //create a global array to store markers

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(32, -6),
    zoom: 7,
    mapTypeId: 'roadmap',
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // create MarkerClusterer, markersArray is not populated yet
  markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  // a new Info Window is created
  infoWindow = new google.maps.InfoWindow();

  // Event that closes the Info Window with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infoWindow.close();
  });
  // Finally displayMarkers() function is called to begin the markers creation
  displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers() {

  // this variable sets the map bounds according to markers position
  var bounds = new google.maps.LatLngBounds();

  // for loop traverses markersData array calling createMarker function for each marker 
  $.get("https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/bae93c852669a35f0e7053e9f8d068841ddf146a/get_data_google_api", function(response) {
    markersData = JSON.parse(response);
    for (var i = 0; i < markersData.length; i++) {

      var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);
      var Route = markersData[i].Route;
      var Secteur = markersData[i].Secteur;
      var Agence = markersData[i].Agence;
      var CodeClient = markersData[i].CodeClient;
      var PrecisionGPS = markersData[i].PrecisionGPS;
      var Latitude = markersData[i].Latitude;
      var Longitude = markersData[i].Longitude;
      var BarCode = markersData[i].BarCode;
      var PrenomClient = markersData[i].PrenomClient;
      var NumAdresse = markersData[i].NumAdresse;
      var Tel = markersData[i].Tel;
      var Whatsapp = markersData[i].Whatsapp;
      var NbrFrigo = markersData[i].NbrFrigo;
      var OpenAm = markersData[i].OpenAm;
      var CloseAm = markersData[i].CloseAm;
      var OpenPm = markersData[i].OpenPm;
      var ClosePm = markersData[i].ClosePm;
      var OpenAmVen = markersData[i].OpenAmVen;
      var CloseAmVen = markersData[i].CloseAmVen;
      var OpenPmVen = markersData[i].OpenPmVen;
      var ClosePmVen = markersData[i].ClosePmVen;
      var OpenAmDim = markersData[i].OpenAmDim;
      var CloseAmDim = markersData[i].CloseAmDim;
      var OpenPmDim = markersData[i].OpenPmDim;
      var ClosePmDim = markersData[i].ClosePmDim;
      var IMEI = markersData[i].IMEI;
      var Date_Added = markersData[i].Date_Added;

      createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added);

      // marker position is added to bounds variable
      bounds.extend(latlng);
    }
    // Finally the bounds variable is used to set the map bounds
    // with fitBounds() function
    map.fitBounds(bounds);
  });
}


// This function creates each marker and it sets their Info Window content
function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added) {

  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    title: CodeClient
  });

  markerArray.push(marker); //push local var marker into global array
  // add marker to the MarkerClusterer
  markerCluster.addMarker(marker);

  // This event expects a click on a marker
  // When this event is fired the Info Window content is created
  // and the Info Window is opened.
  google.maps.event.addListener(marker, 'click', function() {


    var dicoFrigosDetails = {};


    var HTMLtext = "";
    for (var i = 1; i <= Object.keys(dicoFrigosDetails).length / 4; i++) {
      HTMLtext += '';
    }
    // Creating the content to be inserted in the infowindow
    var iwContent = '<div id="iw_container">' +
      '<div class="iw_title">Code Client : ' + CodeClient +
      '</div>' + '<div class="iw_content">Précision : ' + PrecisionGPS +
      '<br />Latitude : ' + Latitude +
      '<br />Longitude : ' + Longitude +
      '<br />Route : ' + Route +
      '<br />Secteur : ' + Secteur +
      '<br />Agence : ' + Agence +
      '<br />Code-barres : ' + BarCode +
      '<br />prenom de Client : ' + PrenomClient +
      //'<br />nom Complet de Client : ' + PrenomClient + ' ' + NomClient +
      '<br />Num Adresse : ' + NumAdresse +
      '<br />Téléphone : ' + Tel +
      '<br />Whatsapp : ' + Whatsapp +
      '<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +
      '<br />Ouverture Matin : ' + OpenAm +
      '<br />Fermeture Matin : ' + CloseAm +
      '<br />Ouverture après-midi : ' + OpenPm +
      '<br />Fermeture Après-midi : ' + ClosePm +
      '<br />Ouverture Matin Ven : ' + OpenAmVen +
      '<br />Fermeture Matin Ven : ' + CloseAmVen +
      '<br />Ouverture après-midi Ven: ' + OpenPmVen +
      '<br />Fermeture après-midi Ven: ' + ClosePmVen +
      '<br />Ouverture Matin Dim : ' + OpenAmDim +
      '<br />Fermeture Matin Dim : ' + CloseAmDim +
      '<br />Ouverture après-midi Dim : ' + OpenPmDim +
      '<br />Fermeture après-midi Dim : ' + ClosePmDim +
      '<br />IMEI : ' + IMEI +
      '<br />Date Passage : ' + Date_Added +
      '</div>';

    // including content to the Info Window.
    infoWindow.setContent(iwContent);
    // opening the Info Window in the current map and at the current marker location.
    infoWindow.open(map, marker);
  });
}

html {
  height: 100%;
  background: gray;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas {
  height: 100%;
}

#iw_container .iw_title {
  font-size: 16px;
  font-weight: bold;
}

.iw_content {
  padding: 15px 15px 15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>InnoTech - Map - Server</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map-canvas" />

MarkerClusterer 未显示在我的地图中

the MarkerClusterer doesn't display in my map

markerclusterer