Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2016, 23:16
Новичок на форуме
Отправить личное сообщение для Koder-S Посмотреть профиль Найти все сообщения от Koder-S
 
Регистрация: 05.06.2016
Сообщений: 4

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

т.е. получаю координаты клика (они еще нужны для расчета стоимости доставки) потом на них ставим маркер, но при повторных кликах все предыдущие остаются а нужен только один
Ответить с цитированием
  #2 (permalink)  
Старый 06.06.2016, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

Koder-S,
https://developers.google.com/maps/d.../marker-remove
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2016, 10:26
Новичок на форуме
Отправить личное сообщение для Koder-S Посмотреть профиль Найти все сообщения от Koder-S
 
Регистрация: 05.06.2016
Сообщений: 4

рони,
Спасибо большое что откликнулись, я читал про удаление\скрытие маркера но не знал как обратиться к ранее поставленному маркеру, сделал по вашему примеру все равно добавляются маркеры при каждом клике
Ответить с цитированием
  #5 (permalink)  
Старый 06.06.2016, 11:02
Новичок на форуме
Отправить личное сообщение для Koder-S Посмотреть профиль Найти все сообщения от Koder-S
 
Регистрация: 05.06.2016
Сообщений: 4

Получилось сделать так
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать собственную карту как в Google map Khazaryan jQuery 1 21.03.2011 20:55
как создать собственную карту как в Google map Khazaryan Общие вопросы Javascript 1 20.03.2011 02:56
Google Map API HugoBorz jQuery 0 04.09.2010 16:44
Google map. Нарисовать на карте иконку. Flake Элементы интерфейса 1 21.11.2008 08:04
Как создать проверку вводимого пароля на стойкость, используя API Google. Александр Черепов Элементы интерфейса 4 03.11.2008 02:16