API GoogleMaps v3 Создайте только 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);

Ответы

Ответ 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);
});

Вы должны работать с одним и тем же маркером все время - не создавайте новые. Здесь у вас есть глобальная переменная marker и в функции placeMarker вы назначаете маркер этой переменной в первый раз. В следующий раз он проверяет, что маркер уже существует, а затем просто меняет свое положение.

Ответ 2

Привет, я наткнулся на ту же проблему, и я придумал этот ответ, прежде чем найти этот пост. Итак, вот ответ:

добавить eventListener в функцию map 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). Вы удаляете маркер двойным щелчком по нему, и вы можете переместить его в другое место.

Надеюсь, что это поможет кому угодно в будущем. Приветствия

Ответ 3

Вы можете попробовать сделать это прямо в своем слушателе:

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

Ответ 4

<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

Ответ 5

используйте addListenerOnce вместо addListener