-1

无法在谷歌地图绘制圆谷歌地图圈不工作

我下面这个教程通过谷歌:

https://developers.google.com/maps/documentation/javascript/examples/circle-simple

我找不到什么是我做的错误。

这里是我的谷歌地图API代码:

<style> 
     #map_canvas { 
     width: 500px; 
     height: 400px; 
     } 
    </style> 
<?php 
$lat = '11.0183'; 
$lng = '76.9725'; 
?> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     function initialize() { 
     var mapCanvas = document.getElementById('map_canvas'); 
     var mapOptions = { 
      center: new google.maps.LatLng("<?php echo $lat ;?>", <?php echo $lng ;?>), 
      population: 14856, 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions) 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

     var citymap = {}; 
citymap['userplace'] = { 
    center: new google.maps.LatLng("<?php echo $lat ;?>", <?php echo $lng ;?>), 
    population: 14856 
}; 

var cityCircle; 
var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Construct the circle for each value in citymap. 
    // Note: We scale the area of the circle based on the population. 
    for (var city in citymap) { 
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: Math.sqrt(citymap[city].population) * 100 
    }; 
    }; 

    </script> 

    <body> 
    <div id="map_canvas"></div> 
    </body> 

我只是想画出圆圈,我已经加载地图。

我该如何解决这个问题?

+1

为什么'android'标签..its PHP和Java脚本 – Gattsu 2014-09-24 08:09:08

回答

0

删除phpcode上的引号就是这样使用,否则将值作为字符串。

var mapOptions = { 
      center: new google.maps.LatLng(<?php echo $lat ;?>, <?php echo $lng ;?>), 
      population: 14856, 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 
+0

我尝试了引号,但还是不能绘制 – 2014-09-24 08:59:21

+0

虽然它不能帮助我,但我接受了答案。如果我的问题没有问题,请立即联系我们 – 2014-10-31 13:04:22

0

你实际上并没有创建一个圆。再看一下这个例子,你删除了这一行:

// Add the circle for this city to the map. 
cityCircle = new google.maps.Circle(populationOptions); 

from循环。应该是这样的:

for (var city in citymap) { 
    var populationOptions = { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: citymap[city].center, 
     radius: Math.sqrt(citymap[city].population) * 100 
    }; 
    new google.maps.Circle(populationOptions); 
} 

工作片断:

$lat = '11.0183'; 
 
$lng = '76.9725'; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng($lat, $lng), 
 
    population: 14856, 
 
    zoom: 11, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 
    var cityCircle; 
 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    mapOptions); 
 

 
    // Construct the circle for each value in citymap. 
 
    // Note: We scale the area of the circle based on the population. 
 
    for (var city in citymap) { 
 
    var populationOptions = { 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     map: map, 
 
     center: citymap[city].center, 
 
     radius: Math.sqrt(citymap[city].population) * 100 
 
    }; 
 
    new google.maps.Circle(populationOptions); 
 
    } 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var citymap = {}; 
 
citymap['userplace'] = { 
 
    center: new google.maps.LatLng($lat, $lng), 
 
    population: 14856 
 
};
#map_canvas { 
 
    width: 500px; 
 
    height: 400px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map_canvas"></div>