gmap中不显示圆圈答案

【问题标题】：Circle not displaying in gmapgmap中不显示圆圈
【发布时间】：2015-09-13 15:39:51
【问题描述】：

这是我的代码：

function initMap() {

    var myLatLng = {lat: {{userInfo.lat}}, lng: {{userInfo.lng}} };

    var map = new google.maps.Map(document.getElementById('gmap'), {
        zoom: 16,
        center: myLatLng
    });

    // Add circle overlay and bind to marker
    var circle = new google.maps.Circle(document.getElementById('gmap'), {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: myLatLng,
        radius: 100    // 10 miles in metres
    });

}

console.log(myLatLng); 显示 lat 和 lng 在那里，地图实际上缩放到我想要的位置。但是圆圈没有出现。谁能帮帮我？

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

您将两个参数传递给Circle 构造函数；你的圈子选项，还有document.getElementById('gmap')，这不是必需的。这仅用于Map 构造函数。见https://developers.google.com/maps/documentation/javascript/reference#Circle

你只需要这样做：

var circle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: myLatLng,
        radius: 100    // 10 miles in metres
    });

代码 sn-p：

function initMap() {

  var myLatLng = {lat: 42, lng:-72};

  var map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 16,
    center: myLatLng
  });

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: myLatLng,
    radius: 100 // 100 metres
  });

}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#gmap {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="gmap"></div>

【讨论】：