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); } 

Trying to add some data to circle markers.

The circles are already markers for specific locations, but I want to make them vary in size depending on a count that corresponds to that location. I cannot seem to find any code to make markers of variable size, since each marker is most likely going to have a unique number of contacts. Any ideas?

Here's the code I have now for markers. I know its not right, since it's not producing what I want.

https://developers.google.com/maps/documentation/javascript/examples/circle-simple <---This is the effect that I am looking for, but I don't understand how to get the values for size to change based on the data entered in the table.

Answer 1

You can set the marker radius to an integer returned by a function. Or it can be an expression.

Here is a JsFiddle with a working example where the count attribute in the XML is set by an expression.

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