谷歌地图圈单个地址不起作用

Question

我正在尝试为我的谷歌地图获得一个圆圈，我没有使用谷歌地图文档中指定的多个数组，因为我只想要一个单个点，圆圈将显示在地图中。 我不知道我在哪里犯错误，请有人让我知道我在哪里犯错误。

这是我的代码

＆＃13;

＆＃13;

 var loc = new google.maps.LatLng(25.800693, 55.976199);
        var marker;
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: loc
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: loc
            });
            google.maps.event.addListener(marker, 'click', toggleBounce);
        }
        function toggleBounce() {

            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }
        cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: new google.maps.LatLng(25.800693, 55.976199),
            radius: 50
        });
        google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

＆＃13;

＆＃13;

提前致谢

Answer 1

在初始化函数内移动圆的初始化，使其在地图之后初始化，而不是之前。

＆＃13;

＆＃13;

var loc = new google.maps.LatLng(25.800693, 55.976199);
var marker;
var map;

function initialize() {
  var mapOptions = {
    zoom: 15,
    center: loc
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: loc
  });
  cityCircle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: new google.maps.LatLng(25.800693, 55.976199),
    radius: 50
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

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

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;