简体   繁体   English

谷歌地图圈未呈现/显示

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM