Как установить размер маркера несколькими покупками?

Question

В системе электронной коммерции, которую я создаю, я хочу использовать google maps api, чтобы показать происхождение покупок. Я хочу, чтобы маркеры были сформированы как круг, и я хочу, чтобы размер этого круга определялся количеством покупок, сделанных из этого конкретного города. Скажем, было 100 заказов из Нью-Йорка и 200 из Бостона, круг Бостона будет в два раза больше.

Как я могу это сделать?

Answer 1

Значок маркера может быть символом (путь SVG), чтобы вы могли масштабировать его до вашего удобства.

Следующий пример масштабирует символ каждый раз, когда вы добавляете его на карту. Вы можете легко использовать его в своем прецеденте.

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