Javascript.RU

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

Google maps 3
Добрый день подскажите пожалуйста как сделать возможность ставить маркер пользователем один раз т.е. при клике на карту ставиться маркер при повтороном клике предыдущий удаляется новый появляется, делается это все для указания адреса доставки товара, сейчас это все делается так
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, 04:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Koder-S,
1. Обьявить marker как глобальную переменную.
2. После строки 1 добавить marker.setMap(null);
3. Убрать var в строке 7
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2016, 08:39
Интересующийся
Отправить личное сообщение для andrey3681 Посмотреть профиль Найти все сообщения от andrey3681
 
Регистрация: 30.06.2016
Сообщений: 20

var map, circle, circleOptions, setCenter, marker;
 
	function initialize() {
    var myLatlng = new google.maps.LatLng(55.7522200, 37.6155600);
    var myOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [
		{
		   "featureType": "water",
		   "stylers": [
		   { "color": "#00C3E9" },
		   { "saturation": 0 }
		   ]
		}
		],
		zoomControl: true,
		scrollwheel: false
    }
	
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);
	setCenter = true;
     
	 var radius = 10;
	 
    circleOptions = {
        fillColor:"#00C3E9",
        fillOpacity:0.5,
        strokeColor:"#F27900",
        strokeOpacity:1,
        strokeWeight:2,
        clickable:false,
		radius: radius*1000
	}
	
	google.maps.event.addListener(map, 'click', function(event) {
        if (setCenter) {
           if (marker != undefined) {
				marker.setMap(null);
            }
			
			
            marker = new google.maps.Marker({
                position:event.latLng,
                clickable:true,
				draggable: true,
				icon: 'images/beachflag_null.png'				
            });
            marker.setMap(map);
            circleOptions.center = event.latLng;
            setCenter = false;
			
			if (circle != undefined) {
                circle.setMap(null);
            }
			
			
			circle = new google.maps.Circle(circleOptions);
            circle.setMap(map);
            setCenter = true;
			
			
			var latlng = new google.maps.LatLng(55.749860, 37.673670);
			if (distHaversine(latlng, circleOptions.center) < radius) {
				var infowindow1 = new google.maps.InfoWindow({
					content: "текст"
				});
				var marker1 = new google.maps.Marker({
					position:latlng,
					clickable:true,
					map: map,
					title: '$title',
					animation: google.maps.Animation.DROP,
					visible: true,
					icon: 'images/beachflag.png'
				});
				marker1.addListener('click', function() {
					infowindow1.open(map, marker1);
				});
			}
        }
    });
	
		google.maps.event.addListener(marker, "dragend", function(event) {
			var point = marker.getPosition();// новые координаты маркера: point.lat() и point.lng()
		});
	}

function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}
 
rad = function(x) {return x*Math.PI/180;}
 
//эта функция используются для определения расстояния между точками на
//поверхности Земли, заданных с помощью географических координат
//результат возвращается в км
distHaversine = function(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());
     
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
     
    return d.toFixed(3);
}
 
window.onload = loadScript;


Если координаты маркера попадают в область овала ставится маркер, как его скрыть при повторном клике и если он не попал в область овала?

Последний раз редактировалось andrey3681, 30.08.2016 в 12:40.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое размещение маркеров на Google maps greck6 Events/DOM/Window 7 30.08.2016 12:52
Google Maps - ищется алгоритм обхода ремонтных участков дорог stankhat Оффтопик 0 06.02.2015 17:12
Нужен разработчик для интеграции Google Maps на сайт Asar Работа 0 09.02.2014 17:58
Как запустить модальное окно из информационного окна google maps? www123 jQuery 5 04.09.2011 23:38
JavaScript + Google Maps ahimaskrasavin Элементы интерфейса 5 20.06.2011 13:21