Google 地图事件学习笔记
介绍
Google 地图是一项允许用户查找地理位置、获取路线和实时交通信息的服务。Google 地图提供了一系列事件，允许开发者通过 JavaScript 代码来监听和响应这些事件。
常见事件
以下是一些常见的 Google 地图事件：
点击事件
click 事件在用户单击地图时触发。开发者可以使用该事件来在地图上添加标记或其他交互元素。
jsCopy Codegoogle.maps.event.addListener(map, 'click', function(event) {
// 在地图上添加标记
new google.maps.Marker({
position: event.latLng,
map: map
});
});
鼠标移动事件
mousemove 事件在用户将鼠标悬停在地图上时触发。开发者可以使用该事件来更新 UI 元素或显示信息。
jsCopy Codegoogle.maps.event.addListener(map, 'mousemove', function(event) {
// 更新 UI 元素
document.getElementById('mouse-coordinates').innerText = event.latLng.toString();
});
缩放事件
zoom_changed 事件在用户缩放地图时触发。开发者可以使用该事件来更新地图上的元素或执行其他操作。
jsCopy Codegoogle.maps.event.addListener(map, 'zoom_changed', function() {
// 更新元素
updateMapElements();
});
拖拽事件
dragend 事件在用户拖拽地图后放开鼠标时触发。开发者可以使用该事件来更新地图上的元素或执行其他操作。
jsCopy Codegoogle.maps.event.addListener(map, 'dragend', function() {
// 更新元素
updateMapElements();
});
实例
以下是一个简单的示例，演示如何使用事件来在 Google 地图上添加标记和更新 UI 元素：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>Google 地图事件示例</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 37.7749, lng: -122.4194}
});
google.maps.event.addListener(map, 'click', function(event) {
// 在地图上添加标记
new google.maps.Marker({
position: event.latLng,
map: map
});
});
google.maps.event.addListener(map, 'mousemove', function(event) {
// 更新 UI 元素
document.getElementById('mouse-coordinates').innerText = event.latLng.toString();
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="width: 500px; height: 500px;"></div>
<div id="coordinates">鼠标坐标: <span id="mouse-coordinates"></span></div>
</body>
</html>
该示例在 Google 地图上创建了一个可交互的界面，允许用户在地图上添加标记并实时查看鼠标坐标。