GIS总结（google map）
1.GIS概述
GIS即地理信息系统（Geographic Information System），地理信息系统是以地理空间数据库为基础，在计算机软硬件的支持下，运用系统工程和信息科学的理论，科学管理和综合分析具有空间内涵的地理数据，以提供管理、决策等所需信息的技术系统。简单的说，GIS是综合处理和分析地理空间数据的一种技术系统，是以测绘测量为基础，以数据库作为数据储存和使用的数据源，以计算机编程为平台的全球空间分析即时技术。地理信息系统作为获取、存储、分析和管理地理空间数据的重要工具、技术和学科，近年来得到了广泛关注和迅猛发展。
2.GIS 地图分类及其实现方式
国外
AutoCAD Map3d
ArcGIS（包括ArcGIS Desktop,MapObjects,ArcIMS、ArcSDE、ArcEngine、ArcServer等） MapInfo(包括Mapinfo Professional、Mapxtreme系列)
PrideMap
GeoMedia
MGE
SmallWorld
Grass
GeoServer
MapGuide
国内
YTLWorld Gis（软件所有数据保存在一个文件夹里，包括图形，属性数据，查询数据，还点图例（即mapgis的子图）线图例（即mapgis的线型）等等，确保了图形在复制传播过程中不丢失任何数据。兼具有CAD制图的灵活，方便。）
MapGIS（MapGISK9基础平台、数据中心集成开发平台等）
SuperMap(SuperMap GIS系列，包括多种大型GIS基础平台软件和多种应用平台软件，已荣获多项国家奖励，目前国内市场份额最大的国产GIS软件系列，是日本五大GIS平台唯一的亚太品牌）
GeoStar
TopMap
GeoBean
VRMap
MapEngine
geobrain
CityMaker
EPS
DTGIS
Converse Earth
3.Google 地图历史
2005年6月20日，Google Maps的覆盖范围，从原先的美国、英国及加拿大，扩大至全球。
2005年9月，Google和北京图盟科技有限公司（Mapabc）合作出版中国大陆地区的Google本地。后来，Google本地重新命名为Google地图。台湾的地图资料则是由勤崴科技所提供，并于2007年10月11日推出台湾版地图。
目前Google Maps的美国、英国、加拿大、日本、等其它地区的服务已经是完成阶段。在北美的部分地方，开通了“街景视图”服务。使用者可以通过街道上的视角查看街景（例如公交车站，商铺等）。但是该服务却有侵犯个人隐私的嫌疑，因为街景视图的照片是由Google的甲虫车在街上随机拍到的，街边路人的动作，停泊点上的车牌号都是一清二楚。Google地图的中国大陆服务仍处于Beta测试阶段。香港版本于2008年7月推出。可以让使用者搜寻餐厅，亦可以建立自己的地图，与其他使用者分享有关的照片和评论。其他功能包括路线查询，可以显示两个地点之间的距离和行车时间。
4.Google map api 简介
GoogleMapsAPI是Google为开发者提供的Maps编程API。它允许开发者在不必建立自己的地图服务器的情况下，将GoogleMaps地图数据嵌入到网站之中，从而实现嵌入GoogleMaps的地图服务应用，并借助GoogleMaps的地图数据为用户提供位置服务。 GoogleMapsAPI除了帮助开发者将地图嵌入到Web应用中之外，还允许开发者利用JavaScript脚本进行应用开发拓展，给地图添加标注和折线及其他地图图层覆盖物和地图地图，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。
通过GoogleMaps为开发者提供的地图API，可以开发出各种各样有趣的地图Mash-up应用，还可以将不同地图图层加载到应用中，如卫星影像、根据海拔高度绘制的高山和植被地形图、街道视图等，从而帮助开发者打造个性化的地图应用站点。
Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。该 API 提供了大量实用工具用以处理地图,并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能全面的地图应用程序。 地图 API 是一项免费的服务，任何非盈利性网站均可使用。
5.Map 对象
1.地图加载
1）Google地图加载比较简单，在你需要加载地图的页面上把js代码<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
添加进<head></head>标签内部。
以上代码表示加载google地图的API，在对地图的显示和操作过程中都会调用google的API。
然后将地图加载进要放置的地图图层中，实现代码如下：
var myLatlng=new google.maps.LatLng(lat,lon);
myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
Lat,lon分别是地图中心点坐标的纬度和经度，zoom表示地图的缩放比例，值越大地图放大倍数越大。
构造函数
|
构造函数 |
说明 |
|
Map(mapDiv:Node, opts?:MapOptions) |
在指定的 HTML 容器中创建新的地图，该容器通常是一个 DIV 元素。 |
方法
|
方法 |
返回值 |
说明 |
|
fitBounds(bounds:LatLngBounds) |
None |
设置地图，使其与指定范围相符。 |
|
getBounds() |
返回当前视口的纬度/经度范围。如果还未启动地图（即 mapType 仍为 Null），或者没有设置中心和缩放，则结果为 Null。 |
|
|
getCenter() |
||
|
getDiv() |
Node |
|
|
getMapTypeId() |
||
|
getProjection() |
传回当前的 Projection。如果还未启动地图（即 mapType 仍为 Null），则结果为 Null。侦听 projection_changed 并检查它的值以确保它的值不为 Null。 |
|
|
getStreetView() |
将默认 StreetViewPanorama 范围传回到地图，该范围可能是嵌入在地图中的默认全景图，也可能是使用 setStreetView()设置的全景图。对地图的 streetViewControl 所做的更改将反映在此类范围全景图的显示中。 |
|
|
getZoom() |
number |
|
|
panBy(x:number, y:number) |
None |
将地图中心移动一段指定的距离（以像素为单位）。如果这段距离既小于地图的宽度，又小于地图的高度，那么移动的动画效果将会十分流畅。请注意，地图坐标系的 x 值从西向东增加，y 值从北向南增加。 |
|
panTo(latLng:LatLng) |
None |
将地图中心更改为指定的 LatLng。如果更改幅度既小于地图的宽度，又小于地图的高度，那么移动的动画效果将会十分流畅。 |
|
panToBounds(latLngBounds:LatLngBounds) |
None |
将地图平移所需的最小距离以包含指定的 LatLngBounds。 范围在地图上的位置并不确定，除了尽可能多地显示范围。范围将定位在由地图类型和导航控件限定的区域内部，但前提是它们出现在地图上。如果范围大于地图， 则地图会移动，以便包括范围的西北角。如果地图位置的移动幅度既小于地图的宽度，又小于地图的高度，那么移动的动画效果将会十分流畅。 |
|
setCenter(latlng:LatLng) |
None |
|
|
setMapTypeId(mapTypeId:MapTypeId) |
None |
|
|
setOptions(options:MapOptions) |
None |
|
|
setStreetView(panorama:StreetViewPanorama) |
None |
将 StreetViewPanorama 绑定到地图。此全景图将覆盖默认StreetViewPanorama，从而使地图可以绑定到地图外的外部全景图。将全景图设置为 null 可将默认的嵌入式全景图绑定回到地图。 |
|
setZoom(zoom:number) |
None |
属性
|
属性 |
类型 |
说明 |
|
controls |
Array.<MVCArray.<Node>> |
附加到地图的其他控件。要在地图中添加控件，请将控件的 <div> 添加到与应渲染它的ControlPosition 相对应的 MVCArray 中。 |
|
mapTypes |
按字符串 ID 划分的 MapType 实例的注册表。 |
|
|
overlayMapTypes |
要叠加的其他地图类型。 |
事件
|
事件 |
参数 |
说明 |
|
bounds_changed |
None |
当可视区域范围更改时会触发此事件。 |
|
center_changed |
None |
当地图中心属性更改时会触发此事件。 |
|
click |
当用户点击地图（但不是点击标记或信息窗口）时会触发此事件。 |
|
|
dblclick |
当用户双击地图时会触发此事件。请注意，触发此事件前还会触发点击事件。 |
|
|
drag |
None |
当用户拖动地图时会反复触发此事件。 |
|
dragend |
None |
当用户停止拖动地图时会触发此事件。 |
|
dragstart |
None |
当用户开始拖动地图时会触发此事件。 |
|
idle |
None |
如果地图在平移或缩放之后变为闲置状态，则会触发此事件。 |
|
maptypeid_changed |
None |
当 mapTypeId 属性更改时会触发此事件。 |
|
mousemove |
只要用户的鼠标在地图容器上移动，就会触发此事件。 |
|
|
mouseout |
当用户的鼠标从地图容器上退出时会触发此事件。 |
|
|
mouseover |
当用户的鼠标进入地图容器时会触发此事件。 |
|
|
projection_changed |
None |
当投影更改时会触发此事件。 |
|
resize |
None |
当 div 更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger(map, 'resize')。 |
|
rightclick |
在地图容器中触发 DOM contextmenu 事件时会触发此事件。 |
|
|
tilesloaded |
None |
可见图块载入完成后会触发此事件。 |
|
zoom_changed |
None |
当地图缩放属性更改时会触发此事件。 |
MapOptions 对象规范
属性
|
属性 |
类型 |
说明 |
|
backgroundColor |
string |
用作地图 div 的背景颜色。当用户进行平移时，如果尚未载入图块，则显示此颜色。仅在启动地图时，才能设置此选项。 |
|
center |
初始的地图中心。必填。 |
|
|
disableDefaultUI |
boolean |
启用/停用所有默认的用户界面。该属性可以单独进行重写。 |
|
disableDoubleClickZoom |
boolean |
启用/停用在双击时缩放并居中。默认情况下处于启用状态。 |
|
draggable |
boolean |
如果为 False，则禁止拖动地图。默认情况下启用拖动。 |
|
draggableCursor |
string |
要在可拖动对象上显示的光标的名称或网址。 |
|
draggingCursor |
string |
要在拖动对象时显示的光标的名称或网址。 |
|
keyboardShortcuts |
boolean |
如果为 False，则禁止通过键盘控制地图。默认情况下启用键盘快捷键。 |
|
mapTypeControl |
boolean |
地图类型控件的初始启用/停用状态。 |
|
mapTypeControlOptions |
地图类型控件的初始显示选项。 |
|
|
mapTypeId |
初始的地图 mapTypeId。必填。 |
|
|
navigationControl |
boolean |
导航控件的初始启用/停用状态。 |
|
navigationControlOptions |
导航控件的初始显示选项。 |
|
|
noClear |
boolean |
如果为 true，则不会清除地图 div 的内容。 |
|
scaleControl |
boolean |
缩放控件的初始启用/停用状态。 |
|
scaleControlOptions |
缩放控件的初始显示选项。 |
|
|
scrollwheel |
boolean |
如果为 False，则停用通过滚轮缩放地图的功能。默认情况下启用滚轮功能。 |
|
streetView |
将街景视图街景小人置于地图上时显示的 StreetViewPanorama。如果未指定全景图，则拖动街景小人时，默认 StreetViewPanorama 将显示在地图的 div中。 |
|
|
streetViewControl |
boolean |
街景视图街景小人控件的初始启用/停用状态。 |
|
zoom |
number |
初始的地图缩放级别。必填。 |
MapOptions：描述地图参数的对象，该对象中的参数主要描述地图缩放大小(zoom)，地图中心点坐标（center），地图显示类型（mapTypeId）.
Zoom地图的缩放范围在0~21之间的任意整数。
Center 地图的中心点坐标是LatLng类型的对象，google.maps.LatLng
MapTypeId 类
是地图的显示模式，有四种供选择：
|
HYBRID |
该地图类型显示卫星图像上的主要街道透明层。 |
|
ROADMAP |
该地图类型显示普通的街道地图。 |
|
SATELLITE |
该地图类型显示卫星图像。 |
|
TERRAIN |
该地图类型显示带有自然特征（如地形和植被）的地图。 |
MapTypeControlOptions 对象规范
用于渲染地图类型控件的选项。
属性
|
属性 |
类型 |
说明 |
|
mapTypeIds |
Array.<MapTypeId>|Array.<string> |
要在控件中显示的地图类型的 ID。 |
|
position |
位置 ID。用于指定控件在地图上的位置。默认位置为 TOP_RIGHT。 |
|
|
style |
样式 ID。用于选择要显示的地图类型控件的样式。 |
MapTypeControlStyle 类
常见 MapTypesControls 的标识符。
常数
|
常数 |
说明 |
|
DEFAULT |
使用默认的地图类型控件。地图默认使用的控件会因窗口大小和其他因素而有所不同。该控件可能在该 API 以后的版本中有所更改。 |
|
DROPDOWN_MENU |
反映屏幕实际使用面积的下拉菜单。 |
|
HORIZONTAL_BAR |
标准的水平单选按钮栏。 |
NavigationControlOptions 对象规范
用于渲染导航控件的选项。
属性
|
属性 |
类型 |
说明 |
|
position |
位置 ID。用于指定控件在地图上的位置。默认位置为 TOP_LEFT。 |
|
|
style |
样式 ID。用于选择要显示的导航控件的样式。 |
NavigationControlStyle 类
导航控件常见类型的标识符。
常数
|
常数 |
说明 |
|
ANDROID |
这是一种小型缩放控件，与 Android 上的本机地图应用程序所用的控件相似。 |
|
DEFAULT |
默认的导航控件。地图默认使用的控件会因窗口大小和其他因素而有所不同。该控件可能在该 API 以后的版本中有所更改。 |
|
SMALL |
只具有缩放功能的小型控件。 |
|
ZOOM_PAN |
较大控件，具有缩放滑块和平移方向柄。 |
ScaleControlOptions 对象规范
用于渲染比例控件的选项。
属性
|
属性 |
类型 |
说明 |
|
position |
位置 ID。用于指定控件在地图上的位置。默认位置为 BOTTOM_LEFT。 |
|
|
style |
样式 ID。用于选择要显示的缩放控件的样式。 |
ScaleControlStyle 类
缩放控件 ID 的标识符。
常数
|
常数 |
说明 |
|
DEFAULT |
标准缩放控件。 |
ControlPosition 类
用于指定控件在地图上的位置的标识符。控件相对于同一布局位置中的其他控件而定位。首先添加的控件将定位在靠近地图边缘的位置。
+---------------+
+ TL T TR +
+ +
+ L R +
+ +
+ +
+ +
+ BL B BR +
+---------------+
顶部或底部行中的元素将向中间流动。左侧或右侧的元素向下流动。
常数
|
常数 |
说明 |
|
BOTTOM |
元素定位在底部行的中间。 |
|
BOTTOM_LEFT |
元素定位在左下角并向中间流动。元素定位在 Google 徽标的右侧。 |
|
BOTTOM_RIGHT |
元素定位在右下角并向中间流动。元素定位在版权的左侧。 |
|
LEFT |
元素定位在左侧，位于左上角的元素下面，并向下流动。 |
|
RIGHT |
元素定位在右侧，位于右上角的元素下面，并向下流动。 |
|
TOP |
元素定位在顶部行的中间。 |
|
TOP_LEFT |
元素定位在左上角并向中间流动。 |
|
TOP_RIGHT |
元素定位在右上角并向中间流动。 |
MapPanes 对象规范
此对象包含渲染叠加层的 DOM 元素。下面列出了这些元素，底部为“窗格 0”，顶部为“窗格 6”。
属性
|
属性 |
类型 |
说明 |
|
floatPane |
Node |
此窗格包含信息窗口。它位于所有地图叠加层之上。（窗格 6）。 |
|
floatShadow |
Node |
此窗格包含信息窗口阴影。该窗格在 overlayImage 之上，这样标记便可位于信息窗口的阴影中。（窗格 4）。 |
|
mapPane |
Node |
此窗格是最下面的窗格，位于图块之上。（窗格 0）。 |
|
overlayImage |
Node |
此窗格包含标记前景图像。（窗格 3）。 |
|
overlayLayer |
Node |
此窗格包含折线、多边形、地面叠加层和图块图层叠加层。（窗格 1）。 |
|
overlayMouseTarget |
Node |
此窗格包含透明元素，可接收针对标记的 DOM 鼠标事件。该窗格在 floatShadow 之上，这样便可点击信息窗口阴影中的标记。（窗格 5）。 |
|
overlayShadow |
Node |
此窗格包含标记阴影。（窗格 2）。 |
MapCanvasProjection 对象规范
方法
|
方法 |
返回值 |
说明 |
|
fromContainerPixelToLatLng(pixel:Point) |
根据地图容器中的像素坐标计算地理坐标。 |
|
|
fromDivPixelToLatLng(pixel:Point) |
根据存放可拖动地图的 div 中的像素坐标计算地理坐标。 |
|
|
fromLatLngToContainerPixel(latLng:LatLng) |
计算地图外部容器的 DOM 元素中指定地理位置的像素坐标。 |
|
|
fromLatLngToDivPixel(latLng:LatLng) |
计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标。 |
|
|
getWorldWidth() |
number |
当前缩放级别下世界地图的宽度（以像素为单位）。 |
6.Overlays 对象
1).marker
用来在地图上表示一个实例对象的图例，可以是网络上的图片或者本地图片。通过实例化google.maps.Marker类的对象，并设置其属性来在地图上添加一个对应标记，实现代码：
//实例化地图对象
var myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var icon = new google.maps.MarkerImage('gisimg/mapimg/port.png ');
var marker=new google.maps.Marker({
position:new google.maps.LatLng(parseFloat(lat),parseFloat(lon)),
title:jsonBP.ports[i].PORTNAME,
cursor:jsonBP.ports[i].PORTID.toString(),
icon:icon
});
marker.setMap(map);
【属性】
Marker对象有很多参数可以设置，其中position属性必须设置,它表示标记在地图上的位置，它的值必须设定为LatLng类的实例化对象
title是标记的名称，如果鼠标经过或者悬停在上面就会显示title的值
cursor是鼠标悬停在标记上时显示的光标
Icon是表示标记显示的图片。它的值时MarkerImage类的对象，参数是图片地址，可以是网络地址或者本地地址。
Clickable 属性设置标记是否启用点击事件和触摸事件，如果设置为true，则标记会收到鼠标事件和触摸事件。默认值为 true。
Draggable 属性设置标记是否可拖动，true表示可拖动，默认为false。
Flat 属性设置标记阴影是否显示，true表示不显示标记阴影。
Shadow属性设置标记阴影，它和icon属性的值类似，同样为MarkerImage类的对象，参数是图片地址，可以是网络地址或者本地地址。
Visible 属性设置是否显示此标记设置为true显示标记，false不显示。
zIndex属性设置标记的显示层次，设置的值越大的显示在地图前面，默认情况下，标记是按纬度显示的，纬度较低的标记显示在纬度较高的标记前。
标记显示设定的地图不但可以用方法设定marker.setMap(map)，而且还可以用map属性设置比如：map：map。
【方法】
Marker有很多方法可以设定，其中这些方法有些是取得标记的参数，有的方法是设置标记的参数，
其中最常用的是setMap()方法，比如上例中的marker.setMap(map)。其他的方法和参数设定类似，这里不做赘述。
【事件】
Marker 事件处理通常要给标记添加事件监听。比如click事件处理代码：
google.maps.event.addListener(marker,'click',function(event){
//添加业务处理代码
});
Clickable_changed 事件当标记的可点击属性更改时会触发此事件。其他的属性更改时候都会触发此事件这里不再赘述。
Dblclick双击标记时触发此事件。
Drag 拖动标记时触发此事件。此标记可用来重新定位标记的显示位置。
Dragend表示停止拖动标记时会触发此事件。
Dragstart 表示开始拖动标记时会触发此事件。
Mousedown 表示鼠标按下时会触发此事件。
Mouseover 表示鼠标经过时会触发此事件。
Mouseout 表示鼠标离开标记区域时会触发此事件。
Mouseup 表示鼠标点击抬起后触发此事件。
Rightclick 表示鼠标右键点击标记时触发此事件。
MarkerImage类
定义一张用作标记图标或者阴影的图像。
MarkerImage(url:string,size?:Size,origin?:Point,anchor?:Point,scaledSize?:Size)
Url:表示图片地址，可以是网络地址和本地地址
Size:是类型Size的一个实例化对象比如new google.maps.Size(13,13)，它设置了图片层的大小，如果设置的小于图片原始大小，那么将从图片的左上角显示部分图片。
Origin 是显示图片上浮标的位置，默认是图片的左上角位置，即new google.maps.Point(0,0),origin和size参数一起使用能显示一部分图片。
Anchor 是设定标记放置在地图上时它的中心点，默认是中下方。
scaledSize 是设定图片的显示大小，如果不设置将按照图片原始大小显示，如果设置比图片原始大小要大图片将失真。
2）. Infowindow
创建带有指定选项的信息窗口。信息窗口可以放置在地图的特定位置，也可以位于标记上方，具体取决于选项中指定的内容。实现代码如下：
Var infowindow;
(function(marker){
//鼠标单击航船事件
google.maps.event.addListener(marker,'click',function(event){
var url='WebForm1.aspx?requst=boatinfo';
eid=marker.getCursor();
var param="eid="+eid;
$.getJSON(url,param,function(jsonboatinfo){
if(jsonboatinfo!=null&&jsonboatinfo!=""){
if(!infowindow){
infowindow=new google.maps.InfoWindow();
}
var content = '<div style="width:200px;height:150px;font-size:12px">航船名称：'+jsonboatinfo.boatinfo[0].BOATNAME+'<br/>'+
'航船类型：'+jsonboatinfo.boatinfo[0].BOATTYPE+'<br/>'+
'北斗定位经度：'+jsonboatinfo.boatinfo[0].LON+'<br/>'+
'北斗定位纬度：'+jsonboatinfo.boatinfo[0].LAT+'</div>'
infowindow.setContent(content);
infowindow.open(map,marker);
}
});
});
})(marker);
在这段看似简单的代码中解决了两个重要问题：
（1）。一个是利用闭合函数解决了点击某一标记时对应标记下的气泡窗口吹出。如果不这么做的话不论点击哪一个标记都只打开最后一个加载到的标记。
（2）.还有一个是在设置外部变量infowindow，判断地图上是否显示有打开的气泡窗口如果没有就实例化一个infowindow，这样做能解决每一次点击新的标记时原先打开的气泡窗口会关闭。
【属性】
Content 要在信息窗口中显示的内容。该内容可以是 HTML 元素、纯文本字符串或包含 HTML 的字符串。信息窗口将会根据相应内容调整大小。要设置内容的具体大小，请将内容设置为相应大小的 HTML 元素。
disableAutoPan 设置当打开气泡窗口时是否平移地图以便让气泡全显示出来。默认是false，当打开时会平移地图。
maxWidth 设置信息窗口的最大宽度（不考虑内容的宽度）。仅在已调用 open 函数前设置了该值时，才考虑使用这个值。在更改内容时，如果要更改最大宽度，请调用 close 函数、setOptions 函数，然后调用 open 函数。
pixelOffset 信息窗口的箭头距离信息窗口在地图上所锚定地理坐标点的偏移量（以像素为单位）。如果信息窗口是通过锚点打开的，则从锚点范围的顶部中心开始计算 pixelOffset。参数是Size类型。
Position 用于显示此信息窗口的 LatLng。如果信息窗口是通过锚点打开的，则使用锚点的位置。参数是LatLng类型。
zIndex 所有信息窗口按 zIndex 值的大小顺序在地图上显示，zIndex 值较大的信息窗口显示在值较小的信息窗口之前。默认情况下，信息窗口是按纬度显示的，纬度较低的信息窗口显示在纬度较高的信息窗口前。信息窗口始终在标记前面显示。
【方法】
Infowindow 的发放包括对其属性的获取和修改操作。这里不做赘述，但有一个方法close( )，当需要关闭infowindow时需要调用此方法，在infowindow关闭的同时，还会销毁内存中新建的infowindow对象。
【事件】
Closeclick 点击关闭气泡窗口时触发此事件。
content_changed 内容属性更改时候会触发此事件。和此事件类似的还有position_changed，zindex_changed这些都是属性发生变更时都会触发此事件。
Domready 当包含 InfoWindow 的内容的 <div> 附加到 DOM 时，会触发此事件。如果您要动态构建信息窗口内容，则可能希望监视此事件。
3).Polyline 类用来在地图上画折线的叠加层。折线是地图上的连接线段的线性叠加层。此类扩展了 MVCObject。众所周知，点构成线，所以折线是由类型是LatLon的点构成的，实现代码：
var route = [
new google.maps.LatLng(37.7671, -122.4206),
new google.maps.LatLng(34.0485, -118.2568)
];
// Creating the polyline object
var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#ff0000",
strokeOpacity: 0.6,
strokeWeight: 5
});
// Adding the polyline to the map
polyline.setMap(map);
};
【属性】
Clickable设定是否此折线可触发鼠标点击事件，默认为true
Geodesic 将每条边渲染为测地线（“大圆”的一段）。测地线是沿地球表面的两点之间的最短路径。
Map 设置将折线显示在其上的地图对象。
Path 折线坐标的有序序列。可以使用一个简单的 LatLng 数组或者 LatLng 的 MVCArray 指定此路径。比如：var route=[new google.maps.LatLng(lat,lng),new goole.maps.LatLng(lat,lng)]或者var route =new google.maps.MVCArray([
new google.maps.LatLng(37.7671, -122.4206),
new google.maps.LatLng(34.0485, -118.2568)
]); 请注意，如果您传递简单的数组，则它会转换为 MVCArray。在 MVCArray 中插入或删除 LatLng 将自动更新地图上的折线。
StrokeColor 设置折线的颜色,采用 HTML 十六进制样式的笔触颜色，即“#FFAA00”
StrokeOpacity 介于 0.0 和 1.0 之间的笔触不透明度
StrokeWeight 笔触宽度（以像素为单位）。
ZIndex 相对于其他折线的 zIndex。
【方法】
getMap() 传回已附加此折线或多边形的地图。
getPath() 检索第一条路径。返回MVCArray.<LatLng>对象
还有诸如setMap(),setPath(),setOptions()方法来设置其属性，这里不做赘述
【事件】
Polyline 事件都是鼠标事件，和上面讲到的一样鼠标事件必须要加监听。它的事件有：click，dblclick，mousedown,mouseover,mouseout,mouseup,mousemove,rightclick。
4）Polygon
多边形（类似于折线）可在一个有序序列中定义一系列连接坐标；此外，多边形会形成一个闭合环并定义一个填充区域。此类扩展了 MVCObject。
因为类似于polygon所以这里不再多做赘述，用我写的一个例子来说明。
var points=[];
var polygon;
google.maps.event.addListener(map,"click",function(event){
if(polygon!=null){
polygon.setMap(null);
}
var lat=event.latLng.lat();
var lng=event.latLng.lng();
points.push(new google.maps.LatLng(lat,lng));
polygon=new google.maps.Polygon({
path:points,
map:map,
strokeColor:'#ff0000',
fillColor:'#ff0000',
strokeOpacity:0.6,
strokeWeight:5
});
});代码实现了通过点击地图在地图上画出一块图形区域。其他属性和polyline基本相同，和polyline不同的是其paths属性可以设定一组或者多组类型为MVCArray或者Array的坐标数组。
5）Rectangle
矩形叠加层。此类扩展了 MVCObject。实例化此类的对象后，通过设置bounds属性并且此属性必须设置，其值为LatLngBounds类型，然后设置其他属性基本和polyline，polygon属性设置一致，实现代码：
var bounds=new google.maps.LatLngBounds (new google.maps.LatLng(50,107),new google.maps.LatLng(39,108));
rectangle=new google.maps.Rectangle({
bounds:bounds,
strokeColor:'#ff0000',
fillColor:'#ff0000',
strokeOpacity:0.6,
strokeWeight:5
});
rectangle.setMap(map);
}
【属性】
Bounds属性是和上面两个类的path/Paths属性不一致的地方在它的类型为LatLngBound，它里面存放的是此矩形西南角（sw）和东北角(ne)的坐标，并且坐标类型为LatLng类型。而path/path存放的是构成线或面的点的坐标并且是坐标数组。总结为：Bounds的值是存放有坐标类型的LatLngBound类型的值，而path/Paths存放的是坐标数组。
Rectangle的属性和polyline，polygon的其他属性一致，这里不做赘述。
Rectangle的方法中相应的getBounds()方法的返回值也是LatLngBounds类型的值.其他的方法基本和上面一致
Rectangle 的事件中的bounds_changed事件是当bounds属性发生变化时触发此事件。其他的事件基本和上面一致
6）Circle
地球表面的圆；也称为“球冠”。此类扩展了 MVCObject。众所周知，要画一个圆必须定义其圆心和半径，圆心决定了圆的位置，半径决定了圆的大小。有两种实现方式，第一种：
var circle=new google.maps.Circle({
radius:100000,
center:new google.maps.LatLng(35,180),
map:map,
strokeColor:'#ff0000',
fillColor:'#ff0000',
strokeOpacity:0.6,
strokeWeight:5
});
这段代码是在地图上直接定义了一个Circel的对象。定义好它的圆心和半径，然后显示在地图上，center表示圆的圆心，radius表示其半径。
但是我们往往是想自己在地图上圈选不同区域然后对圈选区域做操作，如果用地图的mousemove事件监听去每次取得鼠标经过点到圆心的距离的话作为半径的话画圆的时候会很卡，因为鼠标每次移动监听要去重新构成新的圆形，所以我们用一种专门在地图上画图形的类Drawingmanager来解决这个问题，第二种实现方式：
stroke="#ff0000";
fillColor="#ff0000";
fillOpacity=0.1;
stroke_width=2;
stoke_opacity=0.5;
drawingManager=new google.maps.drawing.DrawingManager();
drawingManager.setOptions({
drawingControl: false,
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
circleOptions: {
strokeColor:stroke,
fillColor:fillColor,
fillOpacity:fillOpacity,
strokeWeight: stroke_width,
strokeOpacity:stoke_opacity,
clickable: false,
zIndex: 1
}
});
drawingManager.setMap(map);
此代码实现是先实例化一个DrawingManager类的对象，然后设置其参数drawingmode表示所画图形的类型，这个属性有五种类型可供选择：circle圆 ，marker标记，polyline折线，polygon多边形，rectangle矩形，参数设置和第一种方式雷同，这里我们主要讲circle类，下面会将讲到drawingmode，这里不再赘述。当设置好drawingMode类型后设置circleOptions和上面第一种实现方式设置的雷同。然后将drawingManager设置到地图上drawingManager.setMap(map);
【属性】
Circle 的属性基本和上面讲得rectangle一致，包括设置边框样式和填充样式，有两个样式得说明一下，center（圆心）和radius（半径），圆心是LatLng类型的值，表示地图上一点的经纬度，radius表示圆的半径以（米）为单位。
【方法】
Circle 的方法getBounds()的返回值是此圆的外切正方形的东北角和西南角顶点的坐标值。
其他的方法是其属性的获取和设置。
【事件】
Circle 的事件和polyline的一致，一共有八种。分别是click,dblclick,mouseover,mousedown,mouseout,mousemove,mouseup,rightclick
7.Base (latlng ,latlngbounds,point,size，event)
MapsEventListener 对象规范
此类是不透明的。它没有方法和构造函数。此类的实例从 addListener()、addDomListener() 返回，并最终传递回 removeListener()。
事件命名空间
静态方法
|
静态方法 |
返回值 |
说明 |
|
addDomListener(instance:Object,eventName:string, handler:Function) |
跨浏览器注册事件处理程序。通过调用该函数所返回句柄的 eventRemoveListener(handle) 删除此侦听器。 |
|
|
addDomListenerOnce(instance:Object,eventName:string, handler:Function) |
将在第一个事件之后删除侦听器的 addDomListener 周围的包装。 |
|
|
addListener(instance:Object,eventName:string, handler:Function) |
将指定侦听器函数添加到指定对象实例的指定事件名称。传回该侦听器的标识符，该标识符能够与 eventRemoveListener() 配合使用。 |
|
|
addListenerOnce(instance:Object,eventName:string, handler:Function) |
类似于 eventAddListener，但处理程序会在处理完第一个事件后将自已删除。 |
|
|
clearInstanceListeners(instance:Object) |
None |
对于指定实例，删除其所有事件的所有侦听器。 |
|
clearListeners(instance:Object,eventName:string) |
None |
对于指定实例，删除其指定事件的所有侦听器。 |
|
removeListener(listener:MapsEventListener) |
None |
删除应由上述 eventAddListener 传回的指定侦听器。 |
|
trigger(instance:Object, eventName:string,var_args:*) |
None |
触发指定事件。eventName 后的所有参数都以参数的形式传递到侦听器。 |
|
1.用法例如：google.maps.event.addDomListenerOnce(myselfDiv,"click",function(){ alert("再点我试试！"); }); 这是给地图上自定义的图层（myselfDiv）添加click监听。
2.google.maps.event.addDomListenerOnce(myselfDiv,"click",function(){ alert("再点我试试！"); }); 给地图上自定义的图层（myselfDiv）添加click监听，和上一个监听器不同的是，当第一次点击之后，此监听器将会被清除. 3.addListener和addListenerOnce用法和上面的区别是它们不能给地图上自定义控件即Dom元素添加监听，比如地图或者marker标记可以用它们来添加标记。此处不再赘述。
4.ClearInstanceListeners和clearListener用法基本一致只是传参有变化，例如将上述删除掉(myselfDiv)的监听器，代码比如：google.maps.event.clearInstanceListeners(myselfDiv)，google.maps.event.clearListeners(myselfDiv,"click")
5.removeListener(listener:MapsEventListener)方法的参数是监听器的返回值。它的类型是MapsEventListener。实现代码如下： var g=google.maps.event.addDomListener(myselfDiv,"click",function(){ alert("再点我试试！");}); google.maps.event.removeListener(g); 6.trigger(instance:Object, eventName:string,var_args:*)方法触发指定对象的事件，并且也可以给监听器传递参数。实现代码： g=google.maps.event.addDomListener(myselfDiv,"click",function(){ alert("再点我试试！"); alert(xy); alert(pk);
}); google.maps.event.trigger(myselfDiv,"click",xy="你还点！",pk="好吧，服你了！"); |
||
MouseEvent 对象规范
此对象由地图和叠加层上的各种鼠标事件返回，包含如下所示的所有字段。
属性
|
属性 |
类型 |
说明 |
|
latLng |
发生事件时在光标下方显示的纬度/经度。 |
LatLng 类
LatLng 是以纬度和经度表示的地理坐标点。
请注意，尽管进行地图投影时通常将经度与地图的 x 坐标相关联，将纬度与 y 坐标相关联，但总是先写入纬度坐标，再写入经度坐标。
另请注意，您不能修改 LatLng 的坐标。如果您想要计算另一个点，则必须创建一个新点。
构造函数
|
构造函数 |
说明 |
|
LatLng(lat:number,lng:number, noWrap?:boolean) |
请注意纬度和经度的顺序。如果 noWrap 标记为 True，则在传递时会使用这些数字，否则纬度会限定在 -90 度和 +90 度之间，而经度会限定在 -180 度和 + 180 度之间。 |
方法
|
方法 |
返回值 |
说明 |
|
equals(other:LatLng) |
boolean |
比较函数。 |
|
lat() |
number |
返回纬度值（以度为单位）。 |
|
lng() |
number |
返回经度值（以度为单位）。 |
|
toString() |
string |
转换为字符串表示。 |
|
toUrlValue(precision?:number) |
string |
以“经度, 纬度”形式返回相应 LatLng 的字符串。默认情况下，我们将纬度/经度值四舍五入到小数点后 6 位数。 |
|
google.maps.event.addListener(map,"click",function(event){ if(polygon!=null){ polygon.setMap(null); } var lat=event.latLng.lat(); var lng=event.latLng.lng(); points.push(new google.maps.LatLng(lat,lng)); polygon=new google.maps.Polygon({ path:points, strokeColor:'#ff0000', fillColor:'#ff0000', strokeOpacity:0.6, strokeWeight:5 }); polygon.setMap(map); }); |
||
LatLngBounds 类
LatLngBounds 实例代表通过地理坐标表示的矩形，包含与 180 度子午线相交的矩形。
构造函数
|
构造函数 |
说明 |
|
基于矩形的西南角和东北角处的点构造矩形。 |
方法
|
方法 |
返回值 |
说明 |
|
contains(latLng:LatLng) |
boolean |
如果此范围包含指定的纬度/经度，则传回 true。 |
|
equals(other:LatLngBounds) |
boolean |
如果此范围与指定范围大致相等，则传回 true。 |
|
extend(point:LatLng) |
延伸此范围以包含指定点。 |
|
|
getCenter() |
计算该 LatLngBounds 的中心。 |
|
|
getNorthEast() |
用于传回此范围的东北角。 |
|
|
getSouthWest() |
用于传回此范围的西南角。 |
|
|
intersects(other:LatLngBounds) |
boolean |
如果此范围与另一范围共享任何点，则传回 true。 |
|
isEmpty() |
boolean |
当范围为空时传回。 |
|
toSpan() |
将指定的地图范围转换为纬度/经度跨度。 |
|
|
toString() |
string |
转换为字符串。 |
|
toUrlValue(precision?:number) |
string |
以“lat_lo,lng_lo,lat_hi,lng_hi”形式返回该范围的字符串，其中“lo”表示边界框的西南角，而“hi”表示边界框的东北角。 |
|
union(other:LatLngBounds) |
延伸此范围以包含此范围和指定范围的并集。 |
|
|
var bounds=new google.maps.LatLngBounds (new google.maps.LatLng(34.10168471588048, 178.90333749689546),new google.maps.LatLng(35.89831528411952, -178.90333749689546)); |
||
Point 类
构造函数
|
构造函数 |
说明 |
|
Point(x:number, y:number) |
二维平面上的点。 |
方法
|
方法 |
返回值 |
说明 |
|
equals(other:Point) |
boolean |
比较两个点 |
|
toString() |
string |
传回该点的字符串表示。 |
属性
|
属性 |
类型 |
说明 |
|
x |
number |
X 坐标 |
|
y |
number |
Y 坐标 |
Size 类
构造函数
|
构造函数 |
说明 |
|
Size(width:number, height:number, widthUnit?:string,heightUnit?:string) |
二维大小，其中宽度是指 x 轴上的距离，高度是指 y 轴上的距离。 |
方法
|
方法 |
返回值 |
说明 |
|
equals(other:Size) |
boolean |
判断两个尺寸是否相等。 |
|
toString() |
string |
传回该大小的字符串表示。 |
属性
|
属性 |
类型 |
说明 |
|
height |
number |
沿 y 轴的高度（以像素为单位）。 |
|
width |
number |
沿 X 轴的宽度（以像素为单位）。 |
MVCObject 类
构造函数
|
构造函数 |
说明 |
|
MVCObject() |
实现 KVO 的基类。 |
方法
|
方法 |
返回值 |
说明 |
|
bindTo(key:string, target:MVCObject,targetKey?:string, noNotify?:boolean) |
None |
将视图绑定到模型。 |
|
changed(key:string) |
None |
针对状态更改的常规处理程序。在派生类中覆盖此项，以处理任意状态更改。 |
|
get(key:string) |
* |
获取值。 |
|
notify(key:string) |
None |
通知所有观察者此属性有所改变。这会通知绑定到对象属性的对象以及绑定到的对象。 |
|
set(key:string, value:*) |
None |
设置值。 |
|
setValues(values:Object|undefined) |
None |
设置键值对集合。 |
|
unbind(key:string) |
None |
删除绑定。取消绑定会将未绑定属性设置为当前值。将不会通知该对象，因为值尚未更改。 |
|
unbindAll() |
None |
删除所有绑定。 |
MVCArray 类
此类扩展了 MVCObject。
构造函数
|
构造函数 |
说明 |
|
MVCArray(array?:Array) |
一个易变的 MVC 数组。 |
方法
|
方法 |
返回值 |
说明 |
|
forEach(callback:function(*, number))) |
None |
循环访问每个元素，调用所提供的回调。为每个元素调用回调，如：回调 (element, index)。 |
|
getAt(i:number) |
* |
获取指定索引处的元素。 |
|
getLength() |
number |
传回此数组中的元素数。 |
|
insertAt(i:number, elem:*) |
None |
在指定索引处插入元素。 |
|
pop() |
* |
删除数组的最后一个元素并传回该元素。 |
|
push(elem:*) |
number |
将一个元素添加到数组末尾并传回数组的新长度。 |
|
removeAt(i:number) |
* |
从指定索引处删除元素。 |
|
setAt(i:number, elem:*) |
None |
设置指定索引处的元素。 |
8.Libraries
Google api也用到了包的概念，在引入的时候需要修改页面上引用google api 的代码。修改为：<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
在项目中我用到了drawing libraries,下面就重点来谈谈它
1）.DrawingManager
允许用户在地图上绘制标记，多边形，折线，矩形和圆。 DrawingManager的绘图模式将要创建的用户定义类型的覆盖层。控制添加到地图中，并且允许用户切换绘图模式。实现代码如下：
Var drawingManager=new google.maps.drawing.DrawingManager();
drawingManager.setDrawingMode( google.maps.drawing.OverlayType.CIRCLE),
drawingManager.setMap(map);
如果不设定drawingManager的drawingMode属性那么默认是null.
【属性】
该类没有静态属性，可以通过setOption方法设定其drawingManagerOptions对象属性。该对象属性一会谈到。
【方法】
其方法有getDrawingMode(),getMap(),setDrawingMode(),setMap(),setOptions()
代码实现比如：
stroke="#ff0000";
fillColor="#ff0000";
fillOpacity=0.1;
stroke_width=2;
stoke_opacity=0.5;
drawingManager=new google.maps.drawing.DrawingManager();
drawingManager.setOptions({
drawingControl: true,
drawingMode: google.maps.drawing.OverlayType.CIRCLE,
circleOptions: {
strokeColor:stroke,
fillColor:fillColor,
fillOpacity:fillOpacity,
strokeWeight: stroke_width,
strokeOpacity:stoke_opacity,
clickable: false,
zIndex: 1
}
});
drawingManager.setMap(map);
【事件】
