Question

我试图在Google地图上绘制多个点作为圆圈。这些点代表计算交通量的交通监控站。我想绘制更大的圆圈来代表更大的流量。

以下是试图创建圈子的页面 - http://clecomdev.org/View_TrafficCounts.php 以下是将所有交通工具显示为图钉http://www.clecomdev.org/ERR/ALL_TrafficStations.php

的页面

我可以将所有位置绘制为引脚，但将引脚转换为半径相对于其流量的圆圈不会显示。下面的代码有一个固定的半径，直到我可以显示圆圈。

<script>
    var myMapTraffic;
    var myLatlngTraffic = new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>);
    var markersTraffic = <?php echo json_encode(array_values($TrafficWithin12Mile));?>;
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: myLatlngTraffic,
            mapTypeId: google.maps.MapTypeId.ROADMAP  ,
            scrollwheel: false
        }
        myMapTraffic = new google.maps.Map(document.getElementById('mapTraffic'), mapOptions);
    var circleTraffic;
    var markersTraffic;
    var i;
    for (i = 0; i < markersTraffic.length; i++) {
        var positionTraffic = new google.maps.LatLng(markersTraffic[i][3], markersTraffic[i][4]);
        circleTraffic = new google.maps.Circle({
           map : myMapTraffic,
           radius: 1000,    
           fillColor: "#ff0000",
        });
        circleTraffic.bindTo('center', positionTraffic, 'position')
        };

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

尝试以下更改以绘制圆圈，但没有运气：

var markersTraffic;
    var i;
    for (i = 0; i < markersTraffic.length; i++) {
        var circleTraffic = new google.maps.Circle({
           map : myMapTraffic,
           center: {lat: markersTraffic[i][3], lng: markersTraffic[i][4]},
           radius: 1000,    
           fillColor: "#ff0000",
        });

        };

Answer 1

感谢您的帮助。这是答案。

<script>
    var myMapTraffic;
    var myLatlngTraffic = new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>);
    var markersTraffic = <?php echo json_encode(array_values($TrafficWithin12Mile));?>;
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: myLatlngTraffic,
            mapTypeId: google.maps.MapTypeId.ROADMAP  ,
            scrollwheel: false
        }
        myMapTraffic = new google.maps.Map(document.getElementById('mapTraffic'), mapOptions);

    var i;
    for (i = 0; i < markersTraffic.length; i++) {
        var positionTraffic = new google.maps.LatLng(markersTraffic[i][3], markersTraffic[i][4]);
        var circleTraffic = new google.maps.Circle({
           map : myMapTraffic,
           center: positionTraffic,
           radius: Math.sqrt(Number(markersTraffic[i][1])),    
           fillColor: "#ff0000",
        });

        };

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

将多个圆圈绘制到Google地图

1 个答案: