2015-11-25 268 views
-1

我试过从谷歌API的代码似乎并没有为新的拉特朗坐标设置工作,我必须画圆,它甚至没有显示我所在的区域我试图绘制(即我正在绘制苏拉特地区我没有看到,以及它只是显示为印度)无法使用谷歌地图api在谷歌地图上绘制圆圈

<!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> 

请说什么我做错了

回答

1

你的问题是你”重新治疗citymap就好像它是一个阵列,当你这样做时:

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

然而,它不是一个数组,它是一个结构;即用性能point1point2对象:

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 
     } 
    ]; 
+0

,但可以ü请说为什么它是苏拉特地区没有表现的地图显示为印度 –

+0

您只将地图设置为缩放级别4 ...您是否想放大该圆圈? – duncan