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 }); }); т.е. получаю координаты клика (они еще нужны для расчета стоимости доставки) потом на них ставим маркер, но при повторных кликах все предыдущие остаются а нужен только один |
Koder-S,
1. Обьявить marker как глобальную переменную. 2. После строки 1 добавить marker.setMap(null); 3. Убрать var в строке 7 |
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, время: 14:21. |