More Related Content Similar to Google map api接口整理 Similar to Google map api接口整理 (20) 1. Google Map Api 接口整理
一：基本知识：
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注意一下两
点：
1.如果使用 API 的页面还没有发布，只是在本地调试，可以不用密钥，随
便用个字符串代替就可以了。
2.API 密钥只对网站目录或者域有效。对不同域的网页，需要用这些域分别
注册不同的密钥
2.页面引用 javascript 文件<script src="http://ditu.google.com/maps?
file=api&hl=zh-CN&v=2&key=abcdefg" type="text/javascript"></script>
URL（http://ditu.google.com/maps?file=api&hl=zh-
CN&v=2&key=abcdefg）解析：
1.ditu.google.com：也可以用 ditu.google.cn，如果你需要在地图上显
示大陆以外的详细地图，就用 maps.google.com
2.file=api 这个是请求 API 的 JS 文件用的,固定的格式。
3.hl=zh-CN
这个是在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用
提示等所需要显示文本的语言版本时候用的，如果没有指定这个参数就使用
API 的默认值，对 itu.google.com 来说，默认是中文简体 aps.google.com 默
认的是英文。
4. v=2
这个是用来指定需要导入的 API 类库的版本号，可以有四种设定方式：
v=2.s 稳定版本，更新最慢，但是最可靠；
v=2 当前版本（只用主版本号），更新速度和可靠性介于 s 和 x 之
间
v=2.x 最新版本，更新最快，包括最新功能，可能没有当前版本可靠；
v=2.76 指定具体版本。不建议使用。
2. 注：目前谷歌地图 API 的主版本号是 2，当 API 升级时旧版本只能继续使
用一个月，所以要及时更改主版本号,版本号改变会在 Google Code 和 Maps API
讨论组发布相关信息
5.key=abcdefg 这个是设定你注册的 API 密钥.
二：核心类：
google 地图 API 主要包括：地图类（GMap2）、 标记类（GMarker）、 标记选项
类（GMarkerOptions）、折线类（GPolyline)、经纬度（GLatLng）、命名空间
（GEvent）、 坐标类（GPoint）、控件的大小类 GSize、 interface（GControl）、
地图类型类（GMapType）、地图上面的图标类（GIcon）、窗体类
（GInfoWindow）、窗体选项类 GInfoWindowOptions）、接口 GOverlay、枚举
GMapPane 等等
注：标记和折线都是地图的覆盖物
1.GMap2：地图类,下面实例化一张地图：
var map= new GMap2(container: DOM_Div,opts: Options);
构造函数的参数如下：
参数 是否必要 值类型 定义
container 是 DOM_Div DOM 元素，是个 Div
opts 可选 Options 构造函数选项
GMap2 包含的方法：
1.设置状态的方法：
enableDragging()：设置地图可以被拖动。
disableDragging()：禁止地图被拖动。
draggingEnabled()：返回地图是否能够被拖动的布尔值。如果能够拖动，
返回"真"；否则返回"假"。
3. enableInfoWindow()：设置地图信息窗口可以弹出。
disableInfoWindow()：禁止地图信息窗口弹出。
infoWindowEnabled()：返回地图信息窗口是否能够被弹出的布尔值。如
果能够弹出，返回"真"；否则返回"假"。这个方法通常作为检验之用。
enableDoubleClickZoom()：设置可以双击缩放地图，左键双击为放大，
右键双击为缩小（默认）。
disableDoubleClickZoom()：禁止双击缩放地图，Google Earth 默认
为禁止双击缩放。
doubleClickZoomEnabled()：返回地图是否可以双击缩放的布尔值。如
果能够双击缩放，返回"真"；
enableContinuousZoom()：设置地图可以连续平滑地缩放。
disableContinuousZoom()：禁止地图连续平滑地缩放。
continuousZoomEnabled()：返回地图是否可以连续平滑地缩放的布尔
值。如果能够连续平滑地缩放，返回"真"；否则返回"假"。
enableScrollWheelZoom()：设置地图可以由鼠标滚轮控制缩放。
disableScrollSheelZoom()：禁止由鼠标滚轮控制地图缩放。
scrollWheelZoomEnabled()：返回地图缩放是否可以由鼠标滚轮控制。
如果能够由鼠标滚轮控制缩放，返回"真"；否则返回"假"。
isLoaded() 返回类型布尔值 如果地图已经被 setCenter()初始化，则
返回 true.
2.得到地图的数据信息方法：
getCenter() 返回类型 GLatLng 返回地图中心点的地图坐标.
getBounds() 返回类型 GLatLngBounds 返回地图视口范围的矩形区域
的地理坐标.
getBoundsZoomLevel(bounds) 返回类型数字返回显示指定的区域需要
的最适合的地图缩放等级.该缩放等级是根据当前的地图类型计算出来的，如果
还没有指定地图类型,将使用地图类型数组之中的第一项.
4. getSize() 返回类型 GSize 返回地图视口的像素大小.
getZoom() 返回数字 返回当前的缩放等级.
getContainer()：取得地图的容器
getCurrentMapType()得到当前的地图类型。注意得到的是地图类型
GMapType 对象，而不是对象名称
3.设置地图：
setCenter(center, zoom?, type?)将地图视图切换到指定的中心点,也
可以同时设置可选的地图缩放等级和地图类型.地图类型必须已经添加到地图.
addMapType()该方法必须在构造地图实例之后初始化地图状态时立即执
行.在地图刚刚构造的时候调用地图其他的方法都将会产生错误.
panTo(center) 设置地图的中心点到指定的坐标，如果该点已经在当前
的视口之中，则地图中心会滑动到该位置.
panBy(distance) 地图滑动指定的像素距离.
panDirection(dx, dy) 以指定的方向滑动地图宽度一半的距离.+1 代表
右方和下方,-1 代表左方和上方.
setZoom(level)设置地图的缩放等级到给定值.
zoomIn()缩小地图(将地图的缩放等级增加 1).
zoomOut()放大地图(将地图的缩放等级减少 1).
savePosition()保存地图当前的位置和缩放等级,以供以后通过
returnToSavedPosition()方法来返回当前视图.
returnToSavedPosition()返回到上一次通过 savePosition()保存的地
图视图.
checkResize()检查地图容器(container)的大小是否已经发生变化,在地
图容器 DOM 大小可能发生变化的时候调用该方法,以便地图能进行自动调整.
setMapType(GMapType):设置地图类型：大概有三种类型：
G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP，
removeMapType(GMapType)从当前地图上删除一个地图类型。
5. enableGoogleBar():设置地图上的搜索栏
4.有关地图覆盖物的方法：
addOverlay(overlay) 在地图上添加一个标注并触发地图的 addoverlay
事件.
removeOverlay(overlay) 在地图上删除指定的标注.如果该标注确实在
地图上.
clearOverlays()删除所有地图上的标注.
5.有关信息浮窗的方法：
openInfoWindow(point, node, opts?)在指定的地理点打开一个简单的信
息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以 DOM 节点的形
式给定.
openInfoWindowHtml(point, html, opts?)在指定的地理点打开一个简单
的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以 HTML 文本
的形式给定.
openInfoWindowTabs(point, tabs, opts?)在指定的地理点打开一个分标
签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以 DOM 节
点的形式给定.
openInfoWindowTabsHtml(point, tabs, opts?)在指定的地理点打开一个
分标签的信息浮窗.滑动地图以保证打开的信息浮窗可见.信息浮窗的内容以
HTML 文本的形式给定.
showMapBlowup(point, opts?)在指定的地理点打开一个显示指定点更近
的视图的信息浮窗.
closeInfoWindow()关闭当前打开的信息浮窗.
getInfoWindow() 返回类型 GInfoWindow 返回地图的信息浮窗对象.如果
当前并不存在信息浮窗,则创建一个信息浮窗而不显示它.这个操作并不被
enableInfoWindow()影响.
6. 6.控件的方法：
addControl(GControl)添加一个 google 地图的控件
RemoveControl(GControl)删除一个 google 地图的控件
7. 示例：
var map = new Map2(document.getElementByIdx_x("map"),
{size:GSize(200,200), backgroundColor:"#FF0000"});
map.addControl(new GSmallMapControl());//添加一个地图左侧的缩放
按钮控件
map.addControl(new GMapTypeControl());//添加地图类型控件包括普
通地图、卫星地图、混合地图
map.setCenter(new GLatLng(37.4419, -122.1419), 13); //实例化一
个维度为 37.4419、经度为 -122.1419 的经纬度实例，然后设置地图的中心。地
图缩放值为 13
// Add 10 markers in random locations on the map
var bounds = map.getBounds();//得到地图四周的边界值
var southWest = bounds.getSouthWest();//西南的经纬度
var northEast = bounds.getNorthEast();//东北的经纬度
var lngSpan = northEast.lng() - southWest.lng();//经度差
var latSpan = northEast.lat() - southWest.lat();//维度差
//实例化一个在本张地图中的一个经纬度
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(),
southWest.lng() + lngSpan * Math.random());
var marker = new GMarker(point);//实例化一个标点
7. //给标点加 click 事件，当点击标点时弹出一个信息窗
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>hello</b>");
});
map.addOverlay(marker);//把标点添加到地图覆盖物
2.GMapOptions 类:
这个类型包含以下 4 个属性
1.size
默认情况下，你创建的地图大小就是你给定的地图容器的大小，所以，通
常情况下，你需要显式的声明你的地图容器的 width 和 height 属性，否则，地
图是不能正常显示的，但是，有了 size 这个可选属性后，你就多了一个选择了。
你可以在创建地图的时候直接通过 size 这个属性指定地图的大小，而不需要听
命于地图容器了，即使这个地图容器已经显示的定义了 width 和 height 的大小。
当然，size 属性对应的值是一个 GSize 类型的数据，比如，如果给定
options={size:GSize(400, 300)}，那么，你所创建的地图大小就是 400×300
的一个 矩形块，而和你指定的容器大小无关。
2.mapType
创建地图后，默认显示的地图类型是普通地图，如果要加上可以选择的卫
星地图、地形地图等等其他类型的地图，可以使用 GMap2.setMapType()方法，
但这样往往会罗列一堆的 setMapType。GMapOptions 提供了 mapTypes 这个可选
项，通过一个数组就可以给地图加上多种支持类型，比如使用{mapTypes:
[G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP]}
，你的地图就拥有三种普通、卫星、地形三种类型了。mapTypes 数组中的第一项
是地图加载的默认类型，所以，如果你想默认加载卫星地图，把
G_SATELLITE_MAP 移到数组的第一项就可以了。
8. 3.draggableCursor、draggingCursor
这两个选项是用来定义地图上你的光标类型，我把它们放在一起介绍不等
于它们必须一起使用，你可以单独使用任何一个。其中，draggableCursor 是地
图可拖拽状态（默认就是可拖拽的）下的光标，draggingCursor 是拖拽地图时
的光标，对应的值和你在 JavaScript 里面设置其他的光标时使用的值一样，比
如，
{draggableCursor:"crosshair",draggingCursor:"move"}。当然，你也可以使
用 url 形式加上你自己的图标
4.backgroundColor
在地图图块的图片还没有传送完成之前，地图的显示区域默认会使用灰色
填充，这个就是 backgroundColor 可以发挥作用的地方了，你可以把灰色换成
其他任何符合 W3C 标准的颜色
5.googleBarOptions
这个和你在地图上通过 GMap2.enableGoogleBar()时有关系，指定你添加
GoogleBar 时的一些默认属性
示例：
var options = {size:GSize(400, 300), backgroundColor:"#FF0000"};
var map = new GMap2(document.getElementByIdx_x("mapContainer"),
options);
3.GMarker 类
构造函数：
1.GMarker(point, icon?, inert?) 在指定位置 point 使用指定图标
icon 或 G_DEFAULT_ICON 创建一个标记.如果 inert 参数为 true,该标记将不可
点击而且没有任何参数.(2.50 版本不再支持)
2.GMarker(point, opts?) 在指定位置 point 使用指定的选项
GMarkerOptions 创建一个标记.默认标记能够点击并使用默认图标
G_DEFAULT_ICON. (从 2.50 开始支持)
Gmarker 包含的主要方法：
9. 1.openInfoWindow(content, opts?) 在标记图标之上打开地图信息窗口。
信息窗口的内容为 DOM 节点。仅适用于 GInfoWindowOptions.maxWidth 选项。
2. openInfoWindowHtml(content, opts?) 在标记图标之上打开地图信
息窗口。信息窗口的内容显示为包含 HTML 文本的字符串。仅适用于
GInfoWindowOptions.maxWidth 选项。
3.getIcon() GIcon 如构造函数所设置的，返回此标记的 icon。
4.getTitle() String 如构造函数通过 GMarkerOptions.title 属性所
设置的，返回此标记的标题。如果未传入标题，则返回“undefined（未定义）
”（自 2.85 开始）
5.getPoint() GLatLng 如构造函数或 setPoint() 所设置的，返回此标
记锚定的地理坐标。（自 2.88 开始建议不要使用）
6.getLatLng() GLatLng 如构造函数或 setLatLng() 所设置的，返回此
标记锚定的地理坐标。（自 2.88 开始）
7.setPoint(point) none 设置此标记所锚定点的地理坐标。（自 2.88
开始建议不要使用）
8.setLatLng(point) none 设置此标记所锚定点的地理坐标。（自 2.88
开始）
9.enableDragging() none 允许在地图上拖拽标记。 对于函数，必须已经
用 GMarkerOptions.draggable = true 初始化标记。
10.disableDragging() none 禁止在地图上拖拽标记。
11.draggable() Boolean 如果已使用 GMarkerOptions.draggable =
true 通过构造函数对标记进行了初始化，则返回 true。否则，返回 false。
12.draggingEnabled() Boolean 如果当前允许用户在地图中拖拽标记，
则返回 true。
13.setImage(url) none 请求将 url 指定的图像设置为此标记的前景图。
注：不调整打印图像和阴影图像。 因此，此方法主要是为了达到高亮显示或变暗
显示效果，而不是彻底改变标记的外观。（自 2.75 开始）
15.hide() none 如果当前标记可见，则隐藏标记。注：如果当前标记可
见，则此函数会触发 GMarker.visibilitychanged 事件。（自 2.77 开始）
10. 16.show() none 如果当前标记不可见，则显示标记。注：如果当前标记
不可见，则此函数会触发 GMarker.visibilitychanged 事件。（自 2.77 开始）
17.isHidden() Boolean 如果当前标记不可见，则返回 true。否则，返
回 false。（自 2.77 开始）
示例：
1.
var point = new GLatLng(pointx,pointy);
var icon = new GIcon();
icon.image =
"http://labs.google.com/ridefinder/images/mm_20_red.png";
var myMarker = new GMarker(point, icon);
alert(myMarker.getIcon().image);
2.
var point = new GLatLng(pointx,pointy);
var myMarker = new GMarker(point,{draggable:true});//可拖拽的
标记
alert(myMarker.getPoint());
4.GPolyline 类
构造函数
GPolyline(latlngs, color?, weight?, opacity?, opts?) 根据顶点数
组创建折线。color 是一个字符串，包含十六进制数字、HTML 样式的颜色，即
#RRGGBB。weight 是以像素表示的线宽度。 opacity 为 0 到 1 之间的数字。 该
线条是消除锯齿且半透明的。
GPolyline 包含的方法
11. 1.getVertexCount() Number 返回折线的顶点数目。（自 2.46 开始）
2.getVertex(index) GLatLng 返回折线中给定索引值对应的顶点。（自
2.46 开始）
3.getLength() Number 返回沿地球表面的折线长度（以米表示）。（自
2.85 开始）
4.getBounds() GLatLngBounds 返回此折线的边界。（自 2.85 开始）
5.hide() none 如果当前折线可见并且 GPolyline.supportsHide() 返
回 true，则隐藏此线。注：如果当前折线可见，则此函数会触发
GPolyline.visibilitychanged 事件（自 2.87 开始）
6.isHidden() Boolean 如果当前折线不可见，则返回 true。否则，返
回 false。（自 2.87 开始）
7.show() none 如果当前折线不可见，则显示该线。注：如果当前折线
不可见，则此函数会触发 GPolyline.visibilitychanged 事件。（自 2.87 开
始）
8.supportsHide() Boolean 如果当前环境下支持 GPolyline 对象的
GPolyline.hide()，则返回 true。否则，返回 false。（自 2.87 开始）
注：如果您想在地图里面显示折线，您需要在您的 XHTML 文档里面包含
VML 命名空间和一些 CSS 代码，这样可以令它们在 IE 下面可以正常工作。XHTM
文档的开头看起来就像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8"/>
<title>My Google Maps Hack</title>
12. <style type="text/css">v/:*
{behavior:url(#default#VML);}
</style>
<script src="http://maps.google.com/maps?
file=api&v=2&key=abcdefg" type="text/javascript"></script>
</head>
5.GLatLng 类
构造函数：
GLatLng(lat, lng, unbounded?) 注意纬度和经度的顺序。如果
unbounded 标记为 true，则表示数字以原始输入状态使用，否则纬度将在 -90
度到 +90 度之间，而经度在 -180 度和 +180 度之间周而复始。
GlatLng 包含的方法：
lat() Number 返回以度数表示的纬度坐标（-90 到 +90 之间的数值）。
如果在构造函数中设置了 unbounded 标记，则纬度坐标值可能超出此范围。
lng() Number 返回以度数表示的经度坐标（-180 到 +180 之间的数
值）。如果在构造函数中设置了 unbounded 标记，则经度坐标值可能超出此范
围。
6. GPoint 类
GPoint 是以像素坐标表示的地图上的一点。注意：在 v2 中，它不再是
以地理坐标表示的地面上的一个点。现在，地理坐标可以用 GLatLng 表示。
在地图坐标系统中，x 坐标向右增大，y 坐标向下增大。
注意：GPoint 的两个参数同 x 和 y 属性一样可访问，但最好不要修改
它们，而是在创建新对象时使用不同的参数。
7. GEvent 命名空间
13. 此命名空间包含的函数可用于注册事件处理程序（既处理自定义事件也处
理 DOM 事件）和触发自定义事件。此 API 定义的所有事件都是由
GEvent.trigger() 内部触发的自定义事件。
addListener(source, event, handler) 返回 GEventListener 为源对
象的自定义事件注册事件处理程序。返回一个可用于最终注销处理程序的句柄。
事件触发时，this 将被设置为源对象，同时调用事件处理程序。
addDomListener(source, event, handler) 返回 GEventListener 为
源对象的 DOM 事件注册事件处理程序。源对象必须为 DOM 节点。返回一个可用
于最终注销处理程序的句柄 。事件触发时，this 被设置为源对象，同时调用
事件处理程序。此函数将 DOM 方法用于当前浏览器，来注册事件处理程序。
removeListener(handle)删除使用 addListener() 或
addDomListener() 安装的处理程序。
clearListeners(source, event)删除使用 addListener() 或
addDomListener() 为给定事件在给定对象上安装的所有处理程序。
clearInstanceListeners(source)删除使用 addListener() 或
addDomListener() 为所有事件在给定对象上安装的所有处理程序。
trigger(source, event, ...)使源对象触发自定义事件。将 event 后
所有剩余的可选参数依次输入给事件处理程序作为参数。
bind(source, event, object, method)返回 GEventListener 将给定
对象的方法调用注册为源对象自定义事件的处理程序。 返回一个可用于最终注销
处理程序的句柄。
bindDom(source, event, object, method)返回 GEventListener 将给
定对象的方法调用注册为源对象自定义事件的处理程序。 返回一个可用于最终注
销处理程序的句柄。
callback(object, method) Function 返回在 object 上调用 method
的 closure。
callbackArgs(object, method, ...) Function 返回在 object 上调
用 method 的 closure。调用返回的函数时，将 method 后面所有余下的可选参
数依次输入 method 作为参数。
8.GClientGeocoder 地址解析类：
14. 此类用于和 Google 服务器建立直接通讯，以获取用户指定地址的地理位
置信息。另外，地理解析器可维护自己的地址缓存，可以无需与服务器通讯而回
答重复的查询。注意：目前中国地图地址解析器只支持市/县/区级别的地址。
getLatLng(address, callback) 给 Google 服务器发送请求，对指定的
地址进行地址解析。如果地址已成功定位，则用 GLatLng 点调用用户指定的回
调函数。否则，向回调函数提供一个 null 点。如果地址不明确，则仅向回调函
数传递最匹配的点。（自 2.55 开始）
getLocations(address, callback) 给 Google 服务器发送请求，对指定
的地址进行地址解析。 包含状态代码的答复，如果答复成功，则向用户指定的回
调函数传递一个或多个 Placemark 对象。 GClientGeocoder.getLatLng 方法
与
不同，回调函数可以通过检查 Status 字段的代码值确定失败原因。（自 2.55
开始）
示例：
var map = new GMap2(document.getElementByIdx_x("map"));
var geocoder = new GClientGeocoder();
var address="五道口";
geocoder.getLatLng(address,function(point) {
if (!point)
{
alert(address + " not found");
}
else
{
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
15. alert(point);
}
});
三：下面是 Google API 自带控件
GLargeMapControl：放大缩小调节杆
GMapTypeControl：地图和卫星图片的切换功能
GSmallMapControl：GLargeMapControl 的精简版 ，去掉了缩放的调节
杆保留了缩放按钮
GSmallZoomControl：只包括缩放按钮，去掉了 GLargeMapControl 里其
他的所有控制
GScaleControl：比例尺控件
四：减少浏览器内存泄露
Google Maps API 鼓励使用闭包/Closures，Maps API 的第二版引入一个
GUnload()函数，用于最大限度地消除可能引发内存泄露的循环引用。您应该在
页面的 unload 事件中调
用 GUnload()函数来降低您的应用程序内存泄露的风险：<body
onunload="GUnload()">这个函数确实可以消除 Google 地图在 Internet
Explorer 下的内存泄露，但是如果您比较关心内存消耗问题，您仍旧应该用
Drip 之类的工具测试您自己网站的内存泄露情况。
五：浏览器兼容性
Google Maps API 支持的浏览器种类与 Google 地图网站相同。因为不同的
应用程序在遇到不兼容的浏览器的时候需要表现不同的行为，所以 Maps API 提
供了一个全局方法 (GBrowserIsCompatible())来检查兼容性，但是，发现一个
