Google Maps API V3 学习摘要

 

Google Maps API V3 学习摘要

 

年前项目需要顺便学习了下Google Maps API ，相比先前的V2版本的确在结构上进行了一次较大的调整。类的职责和功能划分更加地清晰，耦合关系也越来越低，更显著的变化是实现了前端MVC分层，便于开发人员编写出结构清晰、职责分明的代码。下面是学习过程中对知识点的一点记录，不成文章。

 

添加地图类型MapType

map.mapTypes.set(mapTypeId,mapType)

map. mapTypeControlOptions.mapTypeIds.push( mapTypeId );

 

添加、删除地图叠加层

map.overlayMapTypes.insertAt(index,mapType)

map.overlayMapTypes.removeAt(index)

叠加层

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html#SubClassing

 

 

图层概念

图层是地图上的对象，包含一个活多个叠加层。使用只需new一个图层对象，调用setMap()添加。

KmlLayer    渲染 KML 和 GeoRSS 元素。

BicyclingLayer

TrafficLayer

 

 

KmlLayer：

KML Placemark 和 GeoRSS point 元素渲染为 Marker，而折线和多边形渲染为 Google Maps API Polyline 和 Polygon 对象。

同样，KML 文件中的 <GroundOverlay> 元素渲染为地图上的 GroundOverlay 元素。

KmlLayer 对象通过自动检索地图指定边界的相应地图项，控制这些子叠加层的显示。随着边界的变化，当前可视区域中的地图项会自动渲染。

注：kml图层服务依赖google服务器，提交kml链接后，服务器获取kml并处理，根据客户端请求区域和级别返回对应的渲染图片。

 

 

自定义叠加层

 

1， google.maps.GroundOverlay  简单的将一张图片叠加到地图上。只需制定url和边界。

new google.maps.GroundOverlay( "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",  imageBounds);

 

2，OverlayView基类。通过实现其子类，可以自定义叠加层对象。

提供了您在创建叠加层时必须实现的若干方法。

该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。

 

要创建自定义叠加层，请执行以下操作：

将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例。这可以有效地实现叠加层类的“子类化”。

为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。

在原型中实现 onAdd() 方法，以将叠加层附加到地图上。当地图准备好附加叠加层后，系统将会调用 OverlayView.onAdd()。

在原型中实现 draw() 方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用 OverlayView.draw()。

您还应当实现 onRemove() 方法，以清理在叠加层中添加的所有元素。

 

 

MapType接口

实现自定义地图类型，需要定义MapType接口规范的一些属性外，需要实现getTile()方法和releaseTile()[可选]方法。

ImageMapType类提供了某些内置行为以简化图像 MapType 的创建过程。

需要定义同样的属性外，需要实现getTileUrl()方法

 

采用此方法实现的自定义地图类型，既可以作为地图类型单独使用；也可以作为叠加层与其他地图类型结合使用；

 

作为基础图层：

mapTypeControlOptions:{mapTypeIds:['hfLayer',google.maps.MapTypeId.ROADMAP]}//或者 mapTypeControlOptions.mapTypeIds.push(key);

map.mapTypes.set('hfLayer',hfMapType);

切换图层：

map.setMapTypeId('hfLayer')//设置当前图层为hfLayer图层。也可在初始化map对象时候设置参数mapTypeId

 

作为叠加层:

map.overlayMapTypes.insertAt(index,mapType)

 

 

投影(projections)

在建立mapType时，需要重写maptypeConfig的projection属性（fromLatLngToPoint函数和fromPointToLatLng函数）。

详细的实现可以参考我的另一篇代码分享文章【YUI3学习（十）---基于组件框架Widget的实例(GoogleMapWidget) 】。

 

地图resize事件

当地图容器大小改变,特别是地图区域变大时，会造成部分显示区域无地图图片。这时可以在地图区域改变后调用以下方法触发地图的resize事件重绘地图。

google.maps.event.trigger(map, 'resize')

 

 

MVC
v3版本使用了mvc结构，定义mvcArray，所以在对地理要素（point、polyline、polygon等）做修改操作时，最好使用其提供的方法insertAt，removeAt等mvcArray数组方法。

而不要使用JS的 Array的方法。