Wie lege ich die Größe eines Markers nach einer Anzahl von Käufen fest?

Question

In einem E-Commerce-System, ich baue, möchte ich Google Maps API verwenden, um die Ursprünge der Einkäufe zu zeigen. Ich möchte, dass die Markierungen als ein Kreis geformt werden, und ich möchte, dass die Größe dieses Kreises durch die Anzahl der Einkäufe aus dieser bestimmten Stadt bestimmt wird. Angenommen, es gab 100 Bestellungen aus NYC und 200 aus Boston, der Kreis von Boston wird doppelt so groß sein.

Wie kann ich das tun?

Answer 1

Ihr Markersymbol kann ein Symbol (SVG-Pfad) sein, damit Sie es nach Belieben skalieren können.

Das folgende Beispiel skaliert das Symbol jedes Mal, wenn Sie der Karte ein neues hinzufügen. Sie können das für Ihren Anwendungsfall problemlos wiederverwenden.

var map; 
var polyLine; 
var polyOptions; 
var iconSize = 0.5; 

function initialize() { 

    var mapOptions = { 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(0,0) 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    google.maps.event.addListener(map, 'click', function(event) { 

     addPoint(event); 
    }); 
} 

function addPoint(event) { 

    var icon = { 

     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
     fillColor: '#FF0000', 
     fillOpacity: .6, 
     anchor: new google.maps.Point(0,0), 
     strokeWeight: 0, 
     scale: iconSize 
    } 

    var marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map, 
     draggable: false, 
     icon: icon, 
     zIndex : -20 
    }); 

    map.panTo(event.latLng); 

    iconSize += .1; 
} 

initialize(); 

JSFiddle demo