Google Maps API круг маркеры, размер переменной

Question

var xml = data.responseXML; 
 
var circles = xml.documentElement.getElementsByTagName("marker"); 
 
     for (var i = 0; i < markers.length; i++) { 
 
      var name = markers[i].getAttribute("location"); 
 
\t \t var scans = markers[i].getAttribute("scans"); 
 
      var point = new google.maps.LatLng(
 
       parseFloat(markers[i].getAttribute("lat")), 
 
       parseFloat(markers[i].getAttribute("long"))); 
 
\t \t var html = name; 
 
      var marker = new google.maps.Marker({ 
 
\t \t  center: center, 
 
      strokeColor: '#FF0000', 
 
\t \t \t strokeOpacity: 0.8, 
 
\t \t \t strokeWeight: 2, 
 
\t \t \t fillColor: '#FF0000', 
 
\t \t \t fillOpacity: 0.35, 
 
\t \t \t map: map, 
 
\t \t \t radius:1000 
 
      }); 
 
      bindInfoWindow(marker, map, infoWindow, html); 
 
     }

Попытка добавить некоторые данные маркеры круг.

Кружки уже являются маркерами для определенных местоположений, но я хочу, чтобы они менялись в зависимости от количества, соответствующего этому местоположению. Я не могу найти какой-либо код для создания маркеров переменной величины, поскольку каждый маркер, скорее всего, будет иметь уникальное количество контактов. Есть идеи?

Вот код, который у меня есть для маркеров. Я знаю, что это не так, потому что это не то, что я хочу.

https://developers.google.com/maps/documentation/javascript/examples/circle-simple < --- Это эффект, который я ищу, но я не понимаю, как получить значения для изменения размера на основе данных, введенных в таблицу.

Answer 1

Вы можете установить радиус маркера в целое число, возвращаемое функцией. Или это может быть выражение.

Вот JsFiddle с рабочим примером, в котором атрибут count в XML задается выражением.

function initMap() { 
    var myLatLng = new google.maps.LatLng(47.6685771, -122.2553681), 
     myOptions = { 
      zoom: 12, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }, 
     map = new google.maps.Map(document.getElementById('map'), myOptions); 

    var markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; ++i) { 
     var marker = markers[i]; 
     var name = marker.getAttribute("location"); 
     var point = new google.maps.LatLng(
     parseFloat(marker.getAttribute("lat")), 
     parseFloat(marker.getAttribute("long"))); 
     var cityCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      center: point, 
      radius: marker.getAttribute("count") * 75 
     }); 
    } 
} 

https://jsfiddle.net/plbogen/ecj8o4uL