Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Google maps 3 (https://javascript.ru/forum/css-html/63403-google-maps-3-a.html)

Koder-S 05.06.2016 20:00

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

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

Dilettante_Pro 06.06.2016 03:56

Koder-S,
1. Обьявить marker как глобальную переменную.
2. После строки 1 добавить marker.setMap(null);
3. Убрать var в строке 7

andrey3681 30.08.2016 07:39

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;


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


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