Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Google map api - Как разрешить пользователю ставить только один маркер на карте (https://javascript.ru/forum/library-toolkit-framework/63406-google-map-api-kak-razreshit-polzovatelyu-stavit-tolko-odin-marker-na-karte.html)

Koder-S 05.06.2016 23:16

Google map api - Как разрешить пользователю ставить только один маркер на карте
 
Добрый день подскажите пожалуйста как сделать возможность ставить маркер пользователем один раз т.е. при клике на карту ставиться маркер при повтороном клике предыдущий удаляется новый появляется, делается это все для указания адреса доставки товара, сейчас это все делается так
google.maps.event.addListener(map, "click", function(e) {
  var infoWindow = new google.maps.InfoWindow({
                 content: 'Latitude: ' + location.lat() + '<br />Longitude: ' +   location.lng()
             });
                         var lat =location.lat();
			 var lng =location.lng();
			 var marker = new google.maps.Marker({
                         position: {lat: lat, lng: lng},
                         map: map
                         });
});

т.е. получаю координаты клика (они еще нужны для расчета стоимости доставки) потом на них ставим маркер, но при повторных кликах все предыдущие остаются а нужен только один

рони 06.06.2016 00:35

Koder-S,
var marker;
google.maps.event.addListener(map, "click", function(e) {
  var infoWindow = new google.maps.InfoWindow({
                 content: 'Latitude: ' + location.lat() + '<br />Longitude: ' +   location.lng()
             });
                         var lat =location.lat();
       var lng =location.lng();
       marker && marker.setMap(null);
       marker = new google.maps.Marker({
                         position: {lat: lat, lng: lng},
                         map: map
                         });
});

рони 06.06.2016 00:40

Koder-S,
https://developers.google.com/maps/d.../marker-remove

Koder-S 06.06.2016 10:26

рони,
Спасибо большое что откликнулись, я читал про удаление\скрытие маркера но не знал как обратиться к ранее поставленному маркеру, сделал по вашему примеру все равно добавляются маркеры при каждом клике

Koder-S 06.06.2016 11:02

Получилось сделать так
var markers =[];
google.maps.event.addListener(map, "click", function(e) {
  var infoWindow = new google.maps.InfoWindow({
                 content: 'Latitude: ' + location.lat() + '<br />Longitude: ' +   location.lng()
             });
                         var lat =location.lat();
       var lng =location.lng();
       for (var i = 0; i < markers.length; i++) {
               markers[i].setMap(null);
             }
       marker = new google.maps.Marker({
                         position: {lat: lat, lng: lng},
                         map: map
                         });
      markers.push(marker);
});

рони 06.06.2016 13:20

Цитата:

Сообщение от Koder-S
все равно добавляются маркеры при каждом клике

значит вы что-то не договариваите, ваш код ничем не отличается от моего.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Labels</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var marker;
function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.

  marker && marker.setMap(null);
  marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>


Часовой пояс GMT +3, время: 16:03.