저는 Google지도에서 하나의 마커 주위에 하나의 원을 표시하는 웹 애플리케이션을 작성하고 있습니다. 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);
});
}
마커와 유사한 작업을 수행해야합니다. 즉, 새 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);
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다