在函数调用上重绘 Google Maps Circle 和 Marker

Question

我正在编写一个 Web 应用程序，它在 Google 地图上围绕一个标记显示一个圆圈。 placeMarker(location, radius) 在 location 处设置一个 Marker 并将一个具有半径的 Circle 绑定到它。我希望脚本在每次调用 placeMarker 时重绘 Circle 和 Marker。当我在控制台中尝试时，它会使用新位置重绘标记，但会保留原始圆半径。 undefined 也会被打印出来。我需要进行哪些更改才能使其正常工作？

var map;
var marker;

function placeMarker(location, radius) {
    if (typeof radius === 'undefined') { radius = initialRadius; }

    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }

    var circle = new google.maps.Circle({
        map: map,
        radius: radius,
        fillColor: '#AA0000',
    });

    circle.bindTo('center', marker, 'position');
}


function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 1
    });

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
}

Answer 1

您将需要执行与标记类似的操作。也就是说，不是创建一个新的circle 对象并将其绑定到地图。您需要使用circle.setCenter(latlng) api 重新定位现有圈子。

见：
https://developers.google.com/maps/documentation/javascript/reference#Circle

很遗憾，您这里没有 JSFiddle 设置，否则我可以尝试为您修复它。但是，您的代码应该如下所示。

var map;
var marker;
var myCircle;

function placeMarker(location, radius) {
    if (typeof radius === 'undefined') { radius = initialRadius; }

    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
    }

    if (myCircle) {
        // Don't create new circle, update circle position instead. 
        myCircle.setCenter(location); // where location=latLng
    }
    else {
        // First time loading, create the circle
        myCircle = new google.maps.Circle({
            map: map,
            radius: radius,
            fillColor: '#AA0000',
        });

        myCircle.bindTo('center', marker, 'position');
    }
}


function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 1
    });

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
}