Я использую этот код для захвата координат, когда пользователь нажимает на карту, используя ниже прослушиватель событий:
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
Однако эта функция не вызывается, когда пользователь нажимает на уже отмеченное местоположение в Map. Значение этой функции не вызывается для точек, где указатель мыши изменяется на значок руки на карте Google.
Нужна помощь по захвату таких мест.
Вы должны добавить, что прослушиватель кликов на маркере даст вам позицию маркера.
//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
Еще одно решение - разместить многоугольник над картой, такой же размер, как и прямоугольник карты, и собрать эти прямоугольные клики.
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 для интересных мест (и их симпатий).
Вы говорите о знаках Point of Interest, которые Google помещает на карту.
Будет ли работать для вас полностью удалить эти значки? Вы можете сделать это с помощью Styled Map. Чтобы увидеть, как это будет выглядеть, откройте Мастер создания стилей и переместите карту в интересующую вас область.
Нажмите Точка интереса в разделе Тип функции, а затем нажмите Ярлыки в разделе Тип элемента. Наконец, нажмите Видимость в разделе <Сильные > Стайлеры и нажмите на ссылку Выкл.
Это должно удалить все значки с точки зрения интереса, не затрагивая остальную часть стиля карты. Если вы ушли, клики будут реагировать на ваш обычный прослушиватель событий клика.
В поле Стиль карты справа показано:
Тип функции: poi
Тип элемента: метки
Видимость: off
Если результат выглядит так, как вы хотите, нажмите Показать JSON в нижней части Стиль карты. В результате JSON должно понравиться следующее:
[
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
Вы можете использовать этот JSON (действительно литерал объекта JavaScript), используя код, аналогичный примерам в Руководстве разработчика Styled Maps. Также см. ссылку MapTypeStyle для полного списка стилей карты.
В этом примере демонстрируется использование прослушивателей событий 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>