Google Maps 事件
点击标记进行缩放
我们仍然使用前一页的地图:一张以英格兰伦敦为中心的地图。
现在,我们希望在用户点击标记时进行缩放(我们为标记添加了一个事件处理程序,当点击标记时会缩放地图)。
这是添加的代码
示例
// 点击标记时缩放到 9 级
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
我们使用 addListener() 事件处理程序来注册事件通知。该方法接受一个对象、一个要监听的事件以及一个在指定事件发生时调用的函数。
返回标记
这里,我们保存缩放更改,并在 3 秒后将地图移回。
示例
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
点击标记时打开信息窗口
点击标记以显示带有文本的信息窗口
示例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
为每个标记设置标记并打开信息窗口
当用户点击地图时运行一个函数。
placeMarker() 函数会在用户点击的位置放置一个标记,并显示一个包含标记纬度和经度的信息窗口。
示例
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}