web-dev-qa-db-fra.com

API GoogleMaps v3 Créer un seul marqueur au clic

Je réussis à créer un marqueur au clic, mais en utilisant le code suivant, je reçois un nouveau marqueur à chaque clic. Je ne veux jamais qu’un seul marqueur ajouté et si quelqu'un clique plusieurs fois, je voudrais qu'il déplace le marqueur position Quelqu'un peut-il aider ici est le code

 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);
google-mapsgoogle-maps-api-3
29
rs82uk
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);
});

Vous devez travailler sur le même marqueur tout le temps - ne créez pas de nouveaux . Vous avez ici une variable globale marker et dans la fonction placeMarker vous affectez le marqueur à cette variable pour la première fois. La prochaine fois qu'il vérifie que ce marqueur existe déjà, il ne fait que modifier sa position.

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

cela fonctionne très bien jsfiddle http://jsfiddle.net/incals/o7jwuz12

et ceci pour le code complet: https://github.com/Lavkushwaha/Google_Maps_API_WithoutPHPH_DOM/blob/master/single.html

1
Lav Kushwaha

Bonjour, je suis tombé sur le même problème et je suis venu avec cette réponse avant de trouver ce post. Alors voici la réponse: 

ajoutez eventListener dans la fonction initialize de la carte:

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

puis créez une variable compteur et utilisez-la dans la variable addListing (ma fonction pour ajouter le marqueur):

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’autre avantage de cette approche (je pense) est que vous pouvez contrôler le nombre de marqueurs que l’utilisateur peut placer facilement sur la carte en augmentant ou en diminuant la valeur du compteur max. . Vous effacez le marqueur en double-cliquant dessus et vous pouvez le replacer ailleurs. 

J'espère que cela aidera tout le monde à l'avenir.
À votre santé

1
edunuke

Vous pouvez essayer de le faire directement dans votre auditeur:

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