通過函數調用重繪Google Maps圈和標記

Question

我正在編寫一個Web應用程序，該應用程序在Google Map上顯示圍繞一個標記的一個Circle。 placeMarker(location, radius)在location處設置標記並將其綁定到具有半徑的圓。每次調用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); 
    }); 
}