API GoogleMaps v3 Crea solo 1 marcatore al momento del clic

Question

Sto creando con successo un indicatore sul clic, tuttavia, utilizzando il seguente codice, ottengo un nuovo indicatore con ogni clic, desidero sempre un solo indicatore aggiunto e se qualcuno fa clic più di una volta Vorrei che per spostare il marcatore esistente nella nuova posizione chiunque può aiutare qui è il codice

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

Answer 1

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

Devi lavorare sullo stesso marcatore per tutto il tempo - non crearne di nuovi. Qui si ha una variabile globale e nella funzione placeMarker si assegna il marcatore a questa variabile per la prima volta. La prossima volta controlla che il marker esista già e poi cambi semplicemente la sua posizione.

Answer 2

uso addListenerOnce, invece di addListener

Answer 3

Si può cercare di renderlo direttamente nel vostro ascoltatore:

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

Answer 4

Ciao mi sono imbattuto lo stesso problema e mi si avvicinò con questa risposta prima di trovare questo post . Quindi, ecco la risposta:

aggiungere l'eventListener all'interno della funzione mappa initialize:

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

quindi creare una variabile contatore e utilizzare all'interno addListing variabile (la mia funzione per aggiungere il marcatore):

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

L'altro vantaggio di questo approccio (credo) è che è possibile controllare la quantità di marker che l'utente può posizionare facilmente nella mappa aumentando o diminuendo il valore del contatore massimo (ad esempio iMax = 2 aumenterà la quantità di mar consentito kers a 2). Si cancella l'indicatore facendo doppio clic su di esso e si può riposizionarlo in un'altra posizione.

Spero che aiuti chiunque in futuro.
Acclamazioni

Answer 5

<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> 

Questo funziona bene jsfiddle http://jsfiddle.net/incals/o7jwuz12

e questo per il codice completo: https://github.com/Lavkushwaha/Google_Maps_API_Without_PHP_DOM/blob/master/single.html