GoogleMaps v3 API Создать только 1 маркер на клике

Question

Я успешно создаю маркер на клике, однако, используя следующий код, я получаю новый маркер с каждым кликом, мне нужно только добавить один маркер, и если кто-то нажимает более одного раза, я бы хотел, чтобы он переместил существующий маркер на новую должность Может кто-нибудь помочь, вот код

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

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

Answer 2

<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

Answer 3

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

добавьте eventListener внутри карты initialize function:

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

, затем создайте переменную счетчика и используйте ее внутри addListing variable (моя функция для добавлениямаркер):

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).Вы стираете маркер, дважды щелкнув по нему, и вы можете переместить его в другое место.

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

Answer 4

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

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

Answer 5

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