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不会显示在我的地图中

1 个答案: