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"); var scans = markers[i].getAttribute("scans"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("long"))); var html = name; var marker = new google.maps.Marker({ center: center, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, radius:1000 }); bindInfoWindow(marker, map, infoWindow, html); } 

尝试向圆标记添加一些数据。

圆圈已经是特定位置的标记，但是我想让它们的大小根据与该位置相对应的计数而变化。 我似乎找不到任何代码来制作大小可变的标记，因为每个标记很可能具有唯一数量的联系人。 有任何想法吗？

这是我现在用于标记的代码。 我知道这是不对的，因为它没有产生我想要的东西。

https://developers.google.com/maps/documentation/javascript/examples/circle-simple <---这是我想要的效果，但我不知道如何获取要更改的size值根据表格中输入的数据。

Answer 1

您可以将标记半径设置为函数返回的整数。 也可以是一个表达式。

这是一个带有示例的JsFiddle，其中XML中的count属性由表达式设置。

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