Форум

Koder-S · #1 (**permalink**) 05.06.2016, 23:16

Добрый день подскажите пожалуйста как сделать возможность ставить маркер пользователем один раз т.е. при клике на карту ставиться маркер при повтороном клике предыдущий удаляется новый появляется, делается это все для указания адреса доставки товара, сейчас это все делается так

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

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

рони · #2 (**permalink**) 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
                         });
});

рони · #3 (**permalink**) 06.06.2016, 00:40

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

Koder-S · #4 (**permalink**) 06.06.2016, 10:26

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

Koder-S · #5 (**permalink**) 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);
});

рони · #6 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript