谷歌地图圈不起作用答案

【问题标题】：Google Map Circle not working谷歌地图圈不起作用
【发布时间】：2014-09-24 08:06:09
【问题描述】：

无法在谷歌地图中画圆

我正在通过 google 学习本教程：

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

我找不到我在做什么错误。

这是我的 Google Map 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>

我只想在我加载的地图上画一个圆圈。

我该如何解决这个问题？？

【问题讨论】：

为什么android标签..它的php和java脚本

标签： javascript php google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

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

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

【讨论】：

虽然对我没有帮助，但我接受了答案。如果我的问题没问题，请点赞

【解决方案2】：

您实际上并没有创建一个圈子。再看例子，你去掉了这一行：

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

来自循环。应该是这样的：

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);
}

工作sn-p：

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

【讨论】：