Google Maps API V3 - добавить прослушиватель событий для всех маркеров?
Должен быть способ добавить слушателя ко ВСЕМ МАРКЕРАМ, в настоящее время я добавляю слушателя к каждому, используя цикл, который кажется действительно неправильным...
Это неправильно
google.maps.event.addListener(unique_marker_id, 'click', function(){
//do something with this marker...
});
10 ответов
В обоих Marker а также MarkerWithLabel В этом случае вы можете использовать ключевое слово this для ссылки на объект, к которому прикреплен обработчик события:
google.maps.event.addListener(marker, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
это здесь относится к конкретному объекту маркера.
Вам нужно добавить слушателя к каждому маркеру, но вы можете сделать это легко, например, определив функцию, такую как
function createMarker(pos, t) {
var marker = new google.maps.Marker({
position: pos,
map: m, // google.maps.Map
title: t
});
google.maps.event.addListener(marker, 'click', function() {
alert("I am marker " + marker.title);
});
return marker;
}
и назовите это соответственно:
var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");
или в цикле и т. д.
Если вы используете GoogleMaps v3.16 или более поздней версии, вы можете добавить обработчик событий ко всему map.data слой.
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
map.data.loadGeoJson('http://yourserver.com/path/to/geojson.json');
map.data.addListener('click', function(e) {
// this - instance of the layer object, in this case - map.data
// e.feature - instance of the feature object that initiated the event
// e.latLng - the position of the event
});
см. https://developers.google.com/maps/documentation/javascript/examples/layer-data-event
Мне удалось сделать это с помощью FusionTablesLayer. Нужно немного поработать, чтобы все правильно настроить, но как только вы закончите, это будет очень быстро, даже с тысячами маркеров.
Вы в основном создаете общедоступную таблицу в Google Docs и запрашиваете ее со своей веб-страницы. Карта предварительно сгенерирована на серверах Googles, поэтому она так хорошо работает.
Полная демонстрационная страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var denmark = new google.maps.LatLng(56.010666, 10.936890);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: denmark,
zoom: 7,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Coordinates',
from: '1234567'
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function (event) {
alert('Hello World!'); });
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Проверьте эту статью для получения дополнительной информации, "Слишком много маркеров!" Люк Маэ и Крис Бродфут из команды Google Geo APIs.
Чтобы расширить на Jiri, ответьте на purley для тех, кто ищет, кто также хочет добавить пользовательский ярлык и т. Д. В духе сообщения Jiri, в сокращенной версии:
var m1 = createMarker({lat: -25.363, lng: 131.044}, "m1", "<div id=\"content\"><div id=\"siteNotice\"></div> <h1 id=\"firstHeading\" class=\"firstHeading\">m1</h1> <div id=\"bodyContent\">Some info</div> </div>");
function createMarker(pos, t, d) {
var marker = new google.maps.Marker({
position: pos,
map: map,
title: t
});
google.maps.event.addListener(marker,"click", function() {
alert("I am marker " + marker.title);
new google.maps.InfoWindow({ content: d }).open(map, marker);
});
return marker;
}
Уберите оповещение, просто чтобы показать действие и т. Д. Как и в информации Джири, вы можете добавить м2, м3 и т. Д. Я думал, что это просто закончило.
Это самый простой способ:
google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});
Что я сделал, так это при добавлении нового marker на карте и, прежде чем толкать его в markers = [] массив, я просто добавляю к нему слушателя marker.addListener('click', () => { // Do Something here});
Полный код:
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
},
animation: google.maps.Animation.DROP,
map: map
});
marker.addListener("click",
() => {
console.log("Marker Click Event Fired!");
});
markers.push(marker);
}
ССЫЛКА я следил!
Мне было действительно трудно найти конкретный ответ на мою нужду. Но этот работает сейчас и везде для меня! С уважением!:)
/* Note: I have a set of data, and it is named by the variable data.
* The variable data is an array
*/
//Here I get the length of the data
var dataLength = data.length;
//Then I iterate through all my pieces of data here
//NOTICE THAT THE KEYWORD let IS SO IMPORTANT HERE
for(let markerIterator = 0; markerIterator < dataLength; markerIterator++) {
/* This creates a new google maps marker based on my data's latitude and
* longitude
*/
var marker = new google.maps.Marker({
position: { lat: data[markerIterator].latitude, lng:
data[markerIterator].longitude },
map: map
});
google.maps.event.addListener(marker, 'click', function () {
/* This will spit out the unique markerIterator value for each marker when
* clicked. It is a unique value because I defined markerIterator with the
* keyword let!
*/
console.log(markerIterator);
// Use the keyword this to refer to each unique marker, for example:
map.setCenter(this.getPosition());
});
}
Мне удалось получить ответ здесь: Google Maps и их маркеры
и демо здесь: http://jsfiddle.net/salman/bhSmf/
var map;
function initialize_map(locations) {
var options = {
zoom: 8,
center: new google.maps.LatLng(59.933688,30.331879),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][lat], locations[i][lng]),
map: map,
title: locations[i][title]
});
set_event(marker);
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
function set_event(marker) {
google.maps.event.addListener(marker, 'click', function() {
// do something with this marker ...
});
}
Вы можете сделать что-то вроде этого:
function setMarkers(map, locations) {
var image = ['circle_orange.png','circle_blue .png'];
for (var i = 0; i < locations.length; i++) {
var stations = locations[i];
var myLatLng = new google.maps.LatLng(stations[1], stations[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image[stations[3]],
title: stations[0],
zIndex: stations[3],
optimized: false
});
var infowindow = new google.maps.InfoWindow({
content: "No data available"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent("We can include any station information, for example: Lat/Long: "+ stations[1]+" , "+stations[2]);
infowindow.open(map, this);
});
}
}