Zeichnen Sie Google Maps Circle und Marker auf Funktionsaufruf

Question

Ich schreibe eine Webanwendung, die einen Kreis um einen Marker auf einer Google Map zeigt. placeMarker(location, radius) setzt einen Marker bei location und bindet daran einen Kreis mit einem Radius. Ich möchte, dass das Skript den Kreis und die Markierung neu zeichnet, sobald der marker aufgerufen wird. Wenn ich es in einer Konsole ausprobiere, zeichnet es den Marker mit der neuen Position neu, aber der ursprüngliche Kreisradius bleibt erhalten. undefined wird ebenfalls gedruckt. Was muss ich ändern, damit das funktioniert?

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

Sie müssen etwas ähnliches zu Ihrem Marker tun. Das heißt, anstatt ein neues circle Objekt zu erstellen und es an die Karte zu binden. Sie müssen den vorhandenen Kreis mit der circle.setCenter(latlng) API neu positionieren.

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

Leider haben Sie keinen JSFiddle hier Setup oder sonst könnte ich versuchen, es für Sie zu fixieren. Allerdings sollte Ihr Code so aussehen.

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); 
    }); 
}