2015-01-28 2 views
-2

JS장소 마커를 마지막 클릭으로 바꾸는 방법은 무엇입니까?

var map; 

function initialize() 
{ 
    var myCenter=new google.maps.LatLng(13.001294, 77.661736); 
    var mapProp = { 
    center:myCenter, 
    zoom:15, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

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

function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
    position: location, 
    map: map, 
    }); 
    document.getElementById("latt").innerHTML = location.lat(); 
    document.getElementById("long").innerHTML = location.lng(); 

} 

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

HTML 우리가지도를 하나 이상 클릭 여기

<div id="googleMap" style="width:500px;height:380px;"></div> 
<p id="latt"></p> 
<p id="long"></p> 

는 장소 마커의 번호가 표시됩니다있다. 마지막 장소를 클릭 한 장소 검색기를 하나만 원합니다. 그 문제를 해결하는 방법 ..? 미리 감사드립니다.

답변

2

당신은 마커에 대한 참조를 유지하고 대신 이동 유지할 수 있습니다 :

var marker; 

function placeMarker(location) { 
    if (!marker) { 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map, 
    }); 
    } else { 
    marker.setPosition(location); 
    } 
    document.getElementById("latt").innerHTML = location.lat(); 
    document.getElementById("long").innerHTML = location.lng(); 
} 

편집 : ID가 '위도'로 더 나을 수 있도록 위도 더블 t이 없습니다. 철자를 잘못하면 철자를 바르게 기억할 필요가 있음을 기억해야합니다.

+0

* 동료가 올바르게 입력 할 수 없다는 사실을 잊어 버리는 경우 성가 시게됩니다.하지만 그건 사실입니다! – MrUpsidown

+0

@MrUpsidown - 개인적인 경험 ... 나는 db column lattitude라는 이름을지었습니다. 와우 : – RobH

0

새 마커를 추가하기 전에 마커를 제거하십시오.

var map; 
var marker; 

function initialize() { 

    var myCenter = new google.maps.LatLng(13.001294, 77.661736); 
    var mapProp = { 
     center: myCenter, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

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

function placeMarker(location) { 

    // Remove last marker 
    marker.setMap(null); 

    marker = new google.maps.Marker({ 
     position: location, 
     map: map, 
    }); 

    document.getElementById("latt").innerHTML = location.lat(); 
    document.getElementById("long").innerHTML = location.lng(); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
관련 문제