Координаты захвата в карте Google на клике пользователя
Я использую этот код для захвата координат, когда пользователь нажимает на карту, используя ниже прослушиватель событий:
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
Однако эта функция не вызывается, когда пользователь нажимает на уже отмеченное местоположение в Map.
Значение этой функции не вызывается для точек, где указатель мыши изменяется на значок руки на карте Google.
Нужна помощь по захвату таких мест.
Ответы
Ответ 1
Вы должны добавить, что прослушиватель кликов на маркере даст вам позицию маркера.
//Add listener
google.maps.event.addListener(marker, "click", function (event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
}); //end addListener
Изменить:
Вам нужно что-то вроде этого
//Add listener
google.maps.event.addListener(marker, "click", function (event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
radius = new google.maps.Circle({map: map,
radius: 100,
center: event.latLng,
fillColor: '#777',
fillOpacity: 0.1,
strokeColor: '#AA0000',
strokeOpacity: 0.8,
strokeWeight: 2,
draggable: true, // Dragable
editable: true // Resizable
});
// Center of map
map.panTo(new google.maps.LatLng(latitude,longitude));
}); //end addListener
Ответ 2
Еще одно решение - разместить многоугольник над картой, такой же размер, как и прямоугольник карты, и собрать эти прямоугольные клики.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var lat1 = 37.41463623043073;
var lat2 = 37.46915383933881;
var lng1 = -122.1848153442383;
var lng2 = -122.09898465576174;
var rectangle = new google.maps.Polygon({
paths : [
new google.maps.LatLng(lat1, lng1),
new google.maps.LatLng(lat2, lng1),
new google.maps.LatLng(lat2, lng2),
new google.maps.LatLng(lat1, lng2)
],
strokeOpacity: 0,
fillOpacity : 0,
map : map
});
google.maps.event.addListener(rectangle, 'click', function(args) {
console.log('latlng', args.latLng);
});
});
}
Теперь вы получаете LatLng для интересных мест (и их симпатий).
demo → http://jsfiddle.net/qmhku4dh/
Ответ 3
Вы говорите о знаках Point of Interest, которые Google помещает на карту.
Будет ли работать для вас полностью удалить эти значки? Вы можете сделать это с помощью Styled Map. Чтобы увидеть, как это будет выглядеть, откройте Мастер создания стилей и переместите карту в интересующую вас область.
Нажмите Точка интереса в разделе Тип функции, а затем нажмите Ярлыки в разделе Тип элемента. Наконец, нажмите Видимость в разделе <Сильные > Стайлеры и нажмите на ссылку Выкл.
Это должно удалить все значки с точки зрения интереса, не затрагивая остальную часть стиля карты. Если вы ушли, клики будут реагировать на ваш обычный прослушиватель событий клика.
В поле Стиль карты справа показано:
Тип функции: poi
Тип элемента: метки
Видимость: off
Если результат выглядит так, как вы хотите, нажмите Показать JSON в нижней части Стиль карты. В результате JSON должно понравиться следующее:
[
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
Вы можете использовать этот JSON (действительно литерал объекта JavaScript), используя код, аналогичный примерам в Руководстве разработчика Styled Maps. Также см. ссылку MapTypeStyle для полного списка стилей карты.
Ответ 4
В этом примере демонстрируется использование прослушивателей событий click для POI (точек интереса). Он прослушивает событие click на значке POI, а затем использует placeId из данных события с запросом directionsService.route для расчета и отображения маршрута к выбранному месту. Он также использует placeId, чтобы получить более подробную информацию о месте.
Прочитайте документацию Google.
<!DOCTYPE html>
<html>
<head>
<title>POI Click Events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="infowindow-content">
<img id="place-icon" src="" height="16" width="16">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
function initMap() {
var origin = {lat: -33.871, lng: 151.197};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: origin
});
var clickHandler = new ClickEventHandler(map, origin);
}
/**
* @constructor
*/
var ClickEventHandler = function(map, origin) {
this.origin = origin;
this.map = map;
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
this.placesService = new google.maps.places.PlacesService(map);
this.infowindow = new google.maps.InfoWindow;
this.infowindowContent = document.getElementById('infowindow-content');
this.infowindow.setContent(this.infowindowContent);
// Listen for clicks on the map.
this.map.addListener('click', this.handleClick.bind(this));
};
ClickEventHandler.prototype.handleClick = function(event) {
console.log('You clicked on: ' + event.latLng);
// If the event has a placeId, use it.
if (event.placeId) {
console.log('You clicked on place:' + event.placeId);
// Calling e.stop() on the event prevents the default info window from
// showing.
// If you call stop here when there is no placeId you will prevent some
// other map click event handlers from receiving the event.
event.stop();
this.calculateAndDisplayRoute(event.placeId);
this.getPlaceInformation(event.placeId);
}
};
ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) {
var me = this;
this.directionsService.route({
origin: this.origin,
destination: {placeId: placeId},
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
var me = this;
this.placesService.getDetails({placeId: placeId}, function(place, status) {
if (status === 'OK') {
me.infowindow.close();
me.infowindow.setPosition(place.geometry.location);
me.infowindowContent.children['place-icon'].src = place.icon;
me.infowindowContent.children['place-name'].textContent = place.name;
me.infowindowContent.children['place-id'].textContent = place.place_id;
me.infowindowContent.children['place-address'].textContent =
place.formatted_address;
me.infowindow.open(me.map);
}
});
};
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
