这是我的代码:
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);
显示纬度和经度在那里, map 实际上缩放到我想要的位置。但是圆圈没有出现。谁能帮帮我吗?
最佳答案
您将两个参数传递给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
});
代码片段:
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>
关于javascript - 圆不显示在 gmap 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32551400/