Question

在尝试进一步实施之前，我一直在Google Code Playground中对此进行测试。

这只是在地图上放置一个地图标记，并按照以英里为单位的半径生成一个圆形覆盖图。但是，我仍然无法让这个工作。

它似乎打破了圆形叠加创建。我一直在寻找一个解决方案，但到目前为止我尝试的所有内容要么中断（地图不显示），要么没有结果（没有圆形叠加）。

注意：我遇到了类似的问题[问题：] Circle overlay in Google Map V3 API js。我试过这个解决方案，但它没有用。

function initialize()
{
  if (GBrowserIsCompatible())
  {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(30.6957, -88.1813), 13);


    var latlng = new GLatLng(30.6957, -88.1813);
    map.addOverlay(new GMarker(latlng));

    var draw_circle = null;

    function Draw_Circle(Miles)
    { 
      Miles *= 1600;

      if (draw_circle != null)
      {
        draw_circle.setMap(null);
      }

      draw_circle = new google.maps.Circle({
        center: latlng,
        radius: Miles,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map
      });  
    }

    Draw_Circle(15);
  }
 }

提前再次感谢你。

编辑：现在我被告知我正在混合API版本。我想出了以下内容：

var latLng;

function initialize() {
  var map;
  var mapDiv = document.getElementById('map-canvas');
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(30.6957, -88.1813),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  latLng = new google.maps.LatLng(30.6957, -88.1813);
  var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

  var draw_circle = null;

  function Draw_Circle(Miles)     
  {        
    Miles *= 1600;        
    if (draw_circle != null)       
    {         
      draw_circle.setMap(null);       
    }       

    draw_circle = new google.maps.Circle({         
      center: latlng,         
      radius: Miles,         
      strokeColor: "#FF0000",         
      strokeOpacity: 0.8,         
      strokeWeight: 2,         
      fillColor: "#FF0000",         
      fillOpacity: 0.35,         
      map: map       
     });

  }      

  Draw_Circle(15);
}

我几乎就在那里......现在，我没有来自调试器的任何错误消息来表示我的圆形覆盖图有什么问题。

Answer 1

问题1 ：您正在使用Google Maps API V2和Google Maps API V3。

第2期：在以下代码中

.....
draw_circle = new google.maps.Circle({         
  center: latlng,   
  .....

抛出的错误是ReferenceError: latlng is not defined。

如果将latlng替换为latLng，脚本将按预期工作。

无法在Google JS API V3中查看地图圆圈叠加结果

1 个答案: