Google Maps API V3 的事件

来源：互联网发布：javascript实现倒计时编辑：程序博客网时间：2024/05/16 15:10
Google Maps API V3 的事件模型
有两种类型的事件：
1、用户事件
2、MVC 状态更改
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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 runat="server">    <title></title>       <style type="text/css">                 html { height: 100% }                 body { height: 100%; margin: 0; padding: 0 }                 #map_canvas { height: 100% }           </style>           <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true"></script>           <script type="text/javascript">        var map;        //地图初始化        function initialize() {            var mapOptions = {                center: new google.maps.LatLng(24.886436490787712, -70.2685546875),                zoom: 3,                mapTypeId: google.maps.MapTypeId.ROADMAP            };            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);            //创建标注            var marker = new google.maps.Marker({ position: map.getCenter(), map: map, title: 'Click to zoom' });            //为map地图添加缩放级别更改事(2、MVC 状态更改)            //MVC 对象通常都包含状态。只要更改了对象的属性，API 就会触发已更改该属性的事件。            //例如，当地图的缩放级别更改后，API 将会触发地图上的 zoom_changed 事件。            //您也可以在 event 命名空间方法中注册 addListener() 事件处理程序，以拦截这些状态更改。            google.maps.event.addListener(map, 'zoom_changed', function () {                alert("点击了地图");            });            //为marker添加点击事件(1、用户事件)            //Maps API 中的一些对象旨在对用户事件（例如鼠标事件或键盘事件）作出响应            google.maps.event.addListener(marker, 'click', function () {                alert("你点击了标注");            });            //通常情况下，Google Maps API V3 中的用户界面事件会传递事件参数，您可通过事件监听器访问该参数（其中注明了事件发生时的用户界面状态）。            //例如，用户界面 'click' 事件通常会传递一个包含 latLng 属性的 MouseEvent，该属性指示了地图上的点击位置。            google.maps.event.addListener(map, 'click', function (event) {                placeMarker(event.latLng);            });        }        function placeMarker(location) {            var marker = new google.maps.Marker({ position: location, map: map });            map.setCenter(location);        }      </script></head><body onload="initialize()" style="margin:0 auto">    <form id="form1" runat="server"><div id="map_canvas" style="width:100%; height:100%;left:0px;top:0px;position:absolute;"></div>    </form></body>></html>