Marker Cluster funktioniert nicht

Ich versuche, den Marker Cluster mit dem folgenden Code zu implementieren, funktioniert nicht. Wenn ich versuche, dies auszuführen, zeigt es den Marker an, aber es gruppiert nicht die Marker. Ich habe versucht, das zu beheben, aber ich habe versagt. Kann mir jemand helfen, wie ich dieses Problem beheben kann?Marker Cluster funktioniert nicht

Im folgenden Code Var records hält die Datensätze mit Breiten- und Längenwerte

<html> 
    <style> 
     #map { 
     height: 100%; 
     } 
    </style> 

<body> 

    <div id="map" style="width:100%;height:700px"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 

    <script> 
function myMap() { 
     var myCenter = new google.maps.LatLng(12.9715987,77.5945627); 
     var mapCanvas = document.getElementById("map"); 
     var mapOptions = {center: myCenter, zoom: 2}; 
//some code is there to fetch the records 
     var records = result.getArray("records");// it has records with latitude and longitude values 

    for (var i=0; i< records.length; i++) { 
       var record = records[i]; 
     console.log(record.Name + " -- " + record.Id+" -- "+record.Latitude); 

      var markers = []; 
      var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(record.Latitude,record.Longitude), 
        map : map, 
        //icon: 'brown_markerA.png' 
        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 

       }); 
      markers.push(marker); 

        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
       } 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script> 
</body> 
</html>

Quelle

2017-09-19 Mahesh

ich JavaScript-Fehler mit dem entsandten Code zu erhalten (nach der 'Uncaught Reference Festsetzung: Ergebnis defined' nicht),' js Bibliotheken = Geometrie, Orte & ext =? .js: 40 InvalidValueError: setMap: keine Instanz von Map; und keine Instanz von StreetViewPanorama', 'Uncaught TypeError: this.map_.getZoom ist keine Funktion'. Sie haben keine 'google.maps.Map' in Ihrem Code ... – geocodezip

Sie haben mehrere Fehler im Code:

Sie haben keine google.maps.Map Variable

var map = new google.maps.Map(mapCanvas, mapOptions);

Sie erstellen ein leeres Array innerhalb die Schleife, verschieben Sie es nach draußen.

var markers = []; 
// start of loop 
for (var i = 0; i < records.length; i++) {

Du einen MarkerClusterer für jeden Marker Erzeugen (innerhalb der Schleife), bewegen, dass außerhalb die Schleife:

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

proof of concept fiddle

Code-Schnipsel:

function myMap() { 
 
    var myCenter = new google.maps.LatLng(12.9715987, 77.5945627); 
 
    var mapCanvas = document.getElementById("map"); 
 
    var mapOptions = { 
 
    center: myCenter, 
 
    zoom: 2 
 
    }; 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 
    //some code is there to fetch the records 
 
    var records = [{Latitude: 12.9715, Longitude: 77.5945627},{Latitude: 12.97159, Longitude: 77.594},{Latitude: 12.9715987, Longitude: 77.5945627},{Latitude: 12.971, Longitude: 77.5945627},{Latitude: 12.97, Longitude: 77.5945627}]; 
 
    var markers = []; 
 
    for (var i = 0; i < records.length; i++) { 
 
    var record = records[i]; 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(record.Latitude, record.Longitude), 
 
     map: map, 
 
     //icon: 'brown_markerA.png' 
 
     icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 
 
    }); 
 
    markers.push(marker); 
 
    } 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", myMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
 
<div id="map"></div>

Quelle

2017-09-19 10:45:56 geocodezip

Vielen Dank, nachdem Sie die oben genannten Probleme behoben haben. es funktioniert – Mahesh

Marker Cluster funktioniert nicht

Antwort

Verwandte Themen