當我單擊任意位置時，如何在Google地圖中移動標記

Question

制作方法：如果我單擊谷歌地圖上的某些位置，標記將顯示在上面，如果我單擊其他位置，則標記將更改/移動到新位置。

我認為，將創建事件onClick，但是我很困惑如何開始。

這是我的代碼：

此代碼只是google map的基礎，Map已經出現。

<script>
function loadmap()
{
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccessjalan(position) 
{

var element = document.getElementById('peta');
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);


 var myMapOptions = {
   zoom: 12
   ,center: myLatlng
   ,mapTypeId: google.maps.MapTypeId.HYBRID
 };
 var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
 var image = "images/loctag.png";





 var myOptions = {
  content: ""
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-140, -110)
 ,pixelOffset: new google.maps.Size(140, 110)
 ,zIndex: null
 ,boxStyle: { 
  background: "url('tipbox.gif') no-repeat"
  ,opacity: 0.90
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
 };




}
</script>

我需要下面這樣的屏幕截圖輸出

Answer 1

您需要維護對添加到地圖的最后一個標記（要刪除的先前標記）的全局引用。 然后處理點擊偵聽器中的邏輯。

我包括了這個小提琴，以展示其工作原理

/*
 * declare map as a global variable
 */
var map;
var previousMarker;
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

    map.addListener('click', function(e) {
        if (previousMarker)
        previousMarker.setMap(null);
        placeMarker(e.latLng, map);
    });
    return marker;


  /*
   * add markers to map
   */
  var marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, "<h1>Marker 0</h1><p>This is the home marker.</p>");
});



function placeMarker(position, map) {
    previousMarker = new google.maps.Marker({
        position: position,
        map: map
    });
    map.setPosition(position);
}