Google Maps Heatmap Layer Punkt Radius

Question

Ich möchte in der Lage sein, den Radius von Punkten effektiv in Metern anzugeben. Die API ist so konfiguriert, dass die radius Eigenschaft für Pixel konstant gehalten wird, so dass das Heranzoomen dazu führt, dass die Heatmap erodiert (ich weiß, dass Sie die Heatmap nicht mit der dissipating Eigenschaft erodieren können, aber dies wirft andere Probleme auf, dh um den Heatmap manuell anzuzeigen, um meine Heatmap richtig angezeigt zu bekommen. Hier ist die Heatmaps reference.

Ich versuche speziell, eine Wahrscheinlichkeitsverteilung auf einer Karte anzuzeigen Karte die 0-1 Gewichte auf eine Heatmap Schicht. (ich kann, und wollen nicht, die Bilder überlagern).

Irgendwelche Vorschläge?

Answer 1

Ok, habe ich versucht, einige Dinge:

die Mercator Projection example (check the source) Mit der x, y-Pixelkoordinaten eines beliebigen Punktes aus einem latLng, extrahieren später verwenden, um die geometry library, specifically the computeOffset function bekommen eine andere einen Abstand „DM“ latLng (in Metern) rechts von die vorherige, erhalte die Differenz (in Pixel) als absoluten Wert "DP" und von dort bekommst du dein "pixelsPerMeter" Verhältnis DP/DM.

Also dann, wenn Sie Ihren Radius wollen 100 Meter sein, Sie setzen nur die Eigenschaften {radius:Math.floor(desiredRadiusPerPointInMeters*pixelsPerMeter)}

und die Änderung der Zoom zu behandeln nur einen Listener verwenden

google.maps.event.addListener(map, 'zoom_changed', function() { 
      heatmap.setOptions({radius:getNewRadius()}); 
     }); 

ich hochgeladen ein small example (Zoomen), mit der Schaltfläche unten können Sie prüfen, ob die Entfernung richtig ist.

Answer 2

Für alle, die eine schön verpackte coffeescript-Version von @ lccarrascos jsbin-Beispiel haben möchten, können Sie den Kern des MercatorProjection coffeescript class, den ich mit seinem Code erstellt habe, anzeigen.

Sobald Sie die Klasse geladen haben, können Sie es mit den folgenden verwenden:

map = new google.maps.Map(...) 
heatmap = new google.maps.visualization.HeatmapLayer({map: map}) 
google.maps.event.addListener(map, 'zoom_changed',() -> 
    projection = new MercatorProjection() 
    heatmap.setOptions(radius: projection.getNewRadius(map, 15)) 
) 

Wo ‚15‘ ist der Radius in Metern, die Sie mit oder programmgesteuert durch andere Mittel, um Ihre Heatmap zu bekommen spielen so aussehen, wie du es willst.