Google Maps API圈标记,大小可变

时间:2015-08-20 20:34:38

标签: javascript google-maps google-maps-api-3 markers



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);
        }
&#13;
&#13;
&#13;

尝试将一些数据添加到圆圈标记中。

圆圈已经是特定位置的标记,但我希望它们的大小不同,具体取决于与该位置对应的计数。我似乎无法找到任何代码来制作可变大小的标记,因为每个标记最有可能具有唯一数量的联系人。有什么想法吗?

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

https://developers.google.com/maps/documentation/javascript/examples/circle-simple&lt; ---这是我正在寻找的效果,但我不了解如何根据表格中输入的数据获取尺寸值。< / p>

1 个答案:

答案 0 :(得分: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