Google Map API V3开发（3）
6 Google Maps 事件
每个 Maps API 对象均可导出大量已命名的事件。如果程序想要实现某些事件，则会为这些事件注册 Javascript 事件监听器，并在 google.maps.event 命名空间中注册addListener() 事件处理程序，以便在接收这些事件后执行相应代码。
google.maps.Marker 对象可以监听一些用户事件，例如：
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout‘
使用方法：
Var listener = google.maps.event.addListener(marker, ‘click’, function())
google.maps.event.removeListener(listener)
监听 DOM 事件
Google Maps JavaScript API 事件模型会自行创建并管理自定义事件。不过，浏览器内的DOM（文档对象模型）也会根据所使用的特定浏览器事件模型自行创建并分派事件。如果您想要捕获并响应这些事件，可以使用 Maps API 提供的 addDomListener() 静态方法来监听并绑定到这些 DOM 事件。
google.maps.event.addDomListener(window, 'load', initialize);
代替：
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
7 控件
Maps API 带有一部分可在地图中使用的内置控件：
? 缩放控件，显示滑块（针对大地图）或“+/-”小按钮（针对小地图），用于控制地图的缩放等级。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则显示在左下角。
? 平移控件，显示用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转
? 比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。
? MapType 控件，可让用户在不同的地图类型（例如 ROADMAP 和 SATELLITE）之间进行切换。该控件默认显示在地图的右上角。
? 街景视图控件包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。
? 旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。
? 总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。
8 叠加层
叠加层是地图上与纬度/经度坐标绑定的对象，会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象
Maps API 包含以下几种叠加层：
? 地图上的单个位置是使用标记显示的。标记有时可显示自定义的图标图片，这种情况下标记通常被称为“图标”。标记和图标是 Marker 类型的对象。
? 地图上的线是使用折线（表示一系列按顺序排列的位置）显示的。线是 Polyline 类型的对象。
? 地图上的不规则形状区域是使用多边形（类似于折线）显示的。与折线相同的是，多边形也是由一系列按顺序排列的位置构成的；不同的是，多边形定义的是封闭区域。
? 地图图层可使用叠加层地图类型显示。您可以通过创建自定义地图类型来创建自己的图块集，自定义地图类型可取代基本地图图块集，或作为叠加层显示在现有基本地图图块集之上。
? 信息窗口也是特殊类型的叠加层，用于在指定地图位置上方的弹出式气泡框内显示内容（通常是文字或图片）。
? 您还可以实现自己的自定义叠加层。这些自定义叠加层可实现 OverlayView 接口。
绘图库
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript" src='http://maps.googleapis.com/maps/api/js?v=3&sensor=true&language=hk&libraries=drawing'></script> <script type="text/javascript"> function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(33.174342, 116.147461), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE ] }, markerOptions: { icon: 'http://maps.google.com/mapfiles/marker_green.png' }, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); drawingManager.setMap(map); //var sPointArray = ''; //google.maps.event.addListener(drawingManager, 'polylinecomplete', function (polyline) { //var latlngArray = (polyline.getPath().getArray()); //for (var i = 0; i < latlngArray.length; i++) { // var point = latlngArray[i]; // if (sPointArray == '') { // sPointArray = parseFloat(Number(point.lat())).toFixed(4) + "," + parseFloat(Number(point.lng())).toFixed(4); //} //四位小数足够了 //else { // sPointArray = sPointArray + ";" + parseFloat(Number(point.lat())).toFixed(4) + "," + parseFloat(Number(point.lng())).toFixed(4); //} // } //alert(sPointArray); //}); } google.maps.event.addDomListener(window, 'load', initialize); </script> <title></title> </head> <body> <div class="container"> <form id="form1" action="" class="form-horizontal" role="form" runat="server"> <div id="map_canvas" style="width: 800px; height: 480px; margin-top:15px;"></div> </form> </body> </div> </html>
