Question

我尝试了谷歌API的代码代码似乎不适用于新的latlang坐标集我必须绘制圆圈它甚至没有显示我想要绘制的区域（即我正在为苏拉特绘图区域我不会看到它只是显示为印度）

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    var citymap = {
        point1: {
            center: {lat: 21.250415, lng:72.920614},
            radius: 20000
        },
        point1: {
            center: {lat: 21.073681, lng: 72.751012},
            radius: 11000
        }
    };

    function initMap() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {lat:21.176801, lng: 72.832036},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // Construct the circle for each value in citymap.
        //scale circle based on the radius
        for (var i=0;i<citymap.length;i++) {
            // Add the circle for this city to the map.
            console.log("#####length######");
            console.log(citymap.length);
            var cityCircle = new google.maps.Circle({
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: citymap[i].center,
                radius: citymap[i].radius*10
            });
            console.log("!!!!!!!1");
            console.log( citymap[i].center);
            console.log("@@@@@@@");
            console.log(citymap[i].radius);
        }
    }

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkkS2pZmOgryjc3ZX0sE5Q8tIdsm-Ged4&signed_in=true&callback=initMap"></script>
</body>
</html>

请说出我做错了什么

Answer 1

你的问题是，当你这样做时，你正在将citymap视为一个数组：

for (var i=0;i<citymap.length;i++) {

然而，它不是一个数组，它是一个结构;即具有属性point1和point2的对象：

var citymap = {
        point1: {
            center: {lat: 21.250415, lng:72.920614},
            radius: 20000
        },
        point1: {
            center: {lat: 21.073681, lng: 72.751012},
            radius: 11000
        }
    };

你可以把它变成一个数组，其他一切都可以工作：

var citymap = [
        {
            center: {lat: 21.250415, lng:72.920614},
            radius: 20000
        },
        {
            center: {lat: 21.073681, lng: 72.751012},
            radius: 11000
        }
    ];

无法使用谷歌地图API在谷歌地图上绘制圆圈

1 个答案: