GoogleMaps v3 API在點擊上創建只有1個標記

我成功地在點擊上創建了一個標記，然而，使用下面的代碼，每次點擊時我都會得到一個新標記，我只想添加一個標記，並且如果有人點擊了多次我想它現有的標記移動到新位置誰能幫助這裏是代碼GoogleMaps v3 API在點擊上創建只有1個標記

function placeMarker(location) { 
     var clickedLocation = new google.maps.LatLng(location); 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
    } 

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

來源

2010-09-10 rs82uk

真棒，正是我一直在尋找！ – 2014-03-08 23:11:41

var marker; 

function placeMarker(location) { 
    if (marker) { 
    marker.setPosition(location); 
    } else { 
    marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    } 
} 

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

你必須在相同的標記工作，所有的時間 - 不要創建新的。這裏有一個全局變量和placeMarker函數，您可以將標記首次分配給此變量。下一次它會檢查標記是否已經存在，然後改變其位置。

來源

2010-09-10 11:47:22 hsz

沒有必要。只要使用addListenerOnce – 2010-10-11 15:50:09

然後，如果你兩次它不會更新標記的位置。 – hsz 2010-10-12 18:04:31

看看這[jsfiddle]（http://jsfiddle.net/4N4Wm/） – AvL 2013-11-21 21:01:47

-4

使用addListenerOnce，而不是addListener

來源

2010-10-11 15:49:57

這是錯誤的，因爲OP問：「...如果有人點擊不止一次，我想它將現有的標記移動到新的職位......「 – 2012-06-28 21:51:32

使用addListenerOnce刪除了對if語句的需求。它更乾淨。 – 2012-06-29 18:21:20

清潔你的，但對OP所面臨的問題沒有用處。這在這個問題上很重要。 – 2012-06-29 19:25:28

你可以儘量做到直接在你的聽衆：

google.maps.event.addListener(Map, 'click', function(event){ 
    marker.setMap(null);  
    marker = new google.maps.Marker({ 
     map:  Map, 
     position: event.latLng 
    });  
});

來源

2013-04-30 20:05:53

你好，我偶然發現了同樣的問題，我想出了這個答案找到這個帖子之前。因此，這裏的答案：

添加事件監聽地圖initialize函數內部：

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

然後創建一個計數器變量，並用它裏面addListing變量（我的函數添加標記）：

var i=0 
function addListing(location) { 
    var addMarker; 
    var iMax=1; 

    if(i<=iMax) { 
     addMarker = new google.maps.Marker({ 
     draggable:false, 
     position: location, 
     map: map 
    }); 

    google.maps.event.addListener(addMarker, 'dblclick', function() { 
    addMarker.setMap(null); 
    i=1; 
    }); 

    i++; 

    } else { 
     console.log('you can only post' , i-1, 'markers'); 
     } 
}

這種做法（我認爲）的另一個好處是，你可以很容易地通過增加或減少的最大計數器值控制標記的用戶可以在地圖上放置量（即IMAX = 2將增加允許三月的金額2）。您可以通過雙擊來擦除標記，並且可以將其重新放置在另一個位置。

希望這有助於在未來的人。
乾杯

來源

2014-07-29 03:57:24 edunuke

<div id="map" style="width:100%;height:500px;"></div> 

<script> 

    var marker; 
    var infowindow; 

    function myMap() { 
     var mapCanvas = document.getElementById("map"); 
     var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
     var mapOptions = { 
      center: myCenter, zoom: 18, 
      mapTypeId:google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
     google.maps.event.addListener(map, 'click', function(event) { 
      placeMarker(map, event.latLng); 
     }); 
    } 

    function placeMarker(map, location) { 
     if (!marker || !marker.setPosition) { 
      marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
      }); 
     } else { 
      marker.setPosition(location); 
     } 
     if (!!infowindow && !!infowindow.close) { 
      infowindow.close(); 
     } 
     infowindow = new google.maps.InfoWindow({ 
      content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() 
     }); 
     infowindow.open(map,marker); 
    } 


</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkG1aDqrbOk28PmyKjejDwWZhwEeLVJbA&callback=myMap"></script>

這工作得很好的jsfiddle http://jsfiddle.net/incals/o7jwuz12

，這爲完整的代碼： https://github.com/Lavkushwaha/Google_Maps_API_Without_PHP_DOM/blob/master/single.html

來源

2017-06-09 18:44:54

這個解釋是最好的！ – 2018-02-01 19:35:32

GoogleMaps v3 API在點擊上創建只有1個標記

回答

相關問題