Har*_*ldo 33 google-maps google-maps-api-3
必须有一种方法可以为ALL MARKERS添加一个监听器,目前我正在使用一个感觉非常错误的循环为每个监听器添加一个监听器......
这感觉不对:
google.maps.event.addListener(unique_marker_id, 'click', function(){
//do something with this marker...
});
Gle*_*mad 39
在这两个Marker和MarkerWithLabel的情况下,你还不如用这个关键字来引用该事件处理程序连接的对象:
google.maps.event.addListener(marker, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
这在这里指的是特定的标记对象.
Jir*_*riz 30
您需要将侦听器添加到每个标记,但您可以通过例如定义类似的功能来轻松实现
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");
或循环等
我设法使用 FusionTablesLayer 做到了这一点。正确设置一切需要一些工作，但是一旦完成，即使有数千个标记，它也是超快的。
您基本上是在 Google Docs 中创建一个公共表并从您的网页中查询它。该地图是在 Google 的服务器上预先生成的，这就是它表现如此出色的原因。
完整的演示页面：
<!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 API 团队的 Luke Mahe 和 Chris Broadfoot。
如果您使用的是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
| 归档时间： |
|
| 查看次数： |
72268 次 |
| 最近记录： |