最适合网络开发者的网站
图。初学者课程

尿素

谷歌地图 活动


点击标记进行缩放

我们仍然使用上一页的地图:以英国伦敦为中心的地图。

现在,我们希望在用户点击标记时进行缩放(我们将一个事件处理程序附加到标记,当用户点击时,该标记会缩放地图)。

以下是添加的代码:

例子

// 点击标记时缩放到 9
google.maps.event.addListener(标记,'点击',函数(){
地图.设置缩放(9);
地图.设置中心(标记.getPosition());
});

我们使用 addListener() 事件处理程序注册事件通知。该方法需要一个对象、一个要监听的事件以及一个在指定事件发生时要调用的函数。


平移回标记

在这里,我们保存缩放更改并在 3 秒后将地图平移回来:

例子

google.maps.event.addListener(标记,'点击',函数(){
var pos = map.getZoom();
地图.设置缩放(9);
地图.设置中心(标记.getPosition());
窗口.setTimeout(函数(){map.setZoom(pos);},3000);
});

单击标记时打开信息窗口

单击标记可显示带有一些文本的信息窗口:

例子

var infowindow = new google.maps.InfoWindow({
内容:“Hello World!”
});

google.maps.event.addListener(标记,'点击',函数(){
信息窗口.打开(地图,标记);
});

设置标记并为每个标记打开信息窗口

当用户点击地图时运行一个功能。

placeMarker() 函数在用户点击的位置放置一个标记,并显示一个包含标记经度和纬度的信息窗口:

例子

google.maps.event.addListener(地图,'点击',函数(事件){
placeMarker(地图,event.latLng);
});

函数 placeMarker(地图,位置){
var marker = new google.maps.Marker({
位置: 位置,
地图:地图
  });
var infowindow = new google.maps.InfoWindow({
内容:'纬度:' + location.lat() +
‘<br> 经度:' + location.lng()
  });
信息窗口.打开(地图,标记);
}