Google Maps Circle无法呈现/显示

时间:2018-09-19 08:39:23

标签: javascript html css google-maps maps

我正在使用Google Maps JS API在网站上呈现地图: 该地图以特定点为中心-我想以此点为中心画一个圆。 我遵循了有关Google Maps圆形和多边形的示例和文档-也不知道我在做什么错。这可能是一个愚蠢的错误,但我不确定。我已经尝试了很多方法来解决这个问题。 我有了apiKey来代替apiKey。

地图可以很好地渲染-它是不渲染的圆圈。

如果有人可以引导我朝正确的方向前进,将不胜感激。

这是我的代码:

    <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>

1 个答案:

答案 0 :(得分:0)

问题是将map div中的任何内容设置为最大宽度为100%。