2015-11-25 483 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