[英]Google Maps Circle Not Rendering/Showing
I am using the Google Maps JS API to render a map on a site: This map is centered on a specific point - I would like to draw a circle with this point as its center.我正在使用 Google Maps JS API 在站点上渲染地图:该地图以特定点为中心 - 我想以该点为中心绘制一个圆圈。 I have followed the example and documentation for Google Maps circles and polygons - and have no idea what I am doing wrong.我遵循了谷歌地图圆圈和多边形的示例和文档 - 并且不知道我做错了什么。 It could be a stupid mistake but I am unsure.这可能是一个愚蠢的错误,但我不确定。 I have tried a large number of things to solve this.我已经尝试了很多方法来解决这个问题。 In place of apiKey I have my key.代替 apiKey 我有我的钥匙。
The map renders fine - it's the circle that doesn't render.地图渲染得很好 - 这是不渲染的圆圈。
If anyone could steer me in the right direction it'd be greatly appreciated.如果有人能引导我朝着正确的方向前进,我将不胜感激。
Here is my code:这是我的代码:
<div id="contractor__profile__map">
</div>
<script>
function initContractorMap() {
var centre = new google.maps.LatLng(57.276270031, -2.372935672);
var mapOptions = {
center: centre,
zoom: 9,
mapTypeId: 'terrain'
};
var newMap = new google.maps.Map(document.getElementById('contractor__profile__map'),
mapOptions);
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: centre,
radius: 840583700,
map: newMap
};
var circle = new google.maps.Circle(circleOptions);
circle.setMap(newMap);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}s&callback=initContractorMap"></script>
问题是将地图 div 中的任何内容设置为最大宽度为 100%。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.