Question

无法在Google地图中绘制圆圈

我正在通过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>

我只想在已加载的地图中绘制圆圈。

我该如何解决这个问题？

Answer 1

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

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

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

工作片段：

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

Google Map Circle无效

2 个答案: