GoogleMapApi谷歌地图接口整理.docx

GoogleMapApi谷歌地图接口整理.docx

《GoogleMapApi谷歌地图接口整理.docx》由会员分享，可在线阅读，更多相关《GoogleMapApi谷歌地图接口整理.docx（17页珍藏版）》请在冰豆网上搜索。

GoogleMapApi谷歌地图接口整理

GoogleMapApi谷歌地图接口整理

GoogleMapApi谷歌地图接口整理

GoogleMapApi谷歌地图接口整理

GoogleMapApi谷歌地图接口整理

一：

基本知识：

 1.使用谷歌地图API的第一步就是要注册一个API密钥，需要注重一下两点：

   1.假如使用API的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了。

   2.API密钥只对网站目录或者域有效。

对不同域的网页，需要用这些域分别注册不同的密钥

2.页面引用javascript文件

   URL（

    ：

也可以用，假如你需要在地图上显示大陆以外的具体地图，就用

    2.file=api这个是请求API的JS文件用的,固定的格式。

    3.hl=zh-CN

     这个是在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用提示等所需要显示文本的语言版本时候用的，假如没有指定这个参数就使用API的默认值，对来说，默认是中文简体默认的是英文。

    4.v=2

     这个是用来指定需要导入的API类库的版本号，可以有四种设定方式：

       v=2.s 稳定版本，更新最慢，但是最可靠；

       v=2当前版本（只用主版本号），更新速度和可靠性介于s和x之间

       v=2.x最新版本，更新最快，包括最新功能，可能没有当前版本可靠；

       v=2.76指定具体版本。

不建议使用。

   注：

目前谷歌地图API的主版本号是2，当API升级时旧版本只能继续使用一个月，所以要及时更改主版本号,版本号改变会在GoogleCode和MapsAPI讨论组发布相关信息

    5.key=abcdefg这个是设定你注册的API密钥.

二：

核心类：

  google地图API主要包括：

地图类（GMap2）、标记类（GMarker）、标记选项类（GMarkerOptions）、折线类（GPolyline）、经纬度（GLatLng）、命名空间（GEvent）、坐标类（GPoint）、控件的大小类GSize、interface（GControl）、地图类型类（GMapType）、地图上面的图标类（GIcon）、窗体类（GInfoWindow）、窗体选项类GInfoWindowOptions）、接口GOverlay、枚举GMapPane等等

  注：

标记和折线都是地图的覆盖物

 1.GMap2：

地图类,下面实例化一张地图：

  varmap=newGMap2（container:

DOM_Div,opts:

Options）;

  构造函数的参数如下：

   参数      是否必要     值类型        定义

   container     是         DOM_Div   DOM元素，是个Div

   opts         可选       Options   构造函数选项

   GMap2包含的方法：

    1.设置状态的方法：

      enableDragging（）：

设置地图可以被拖动。

      disableDragging（）：

禁止地图被拖动。

      draggingEnabled（）：

返回地图是否能够被拖动的布尔值。

假如能够拖动，返回"真"；否则返回"假"。

      enableInfoWindow（）：

设置地图信息窗口可以弹出。

      disableInfoWindow（）：

禁止地图信息窗口弹出。

      infoWindowEnabled（）：

返回地图信息窗口是否能够被弹出的布尔值。

假如能够弹出，返回"真"；否则返回"假"。

这个方法通常作为检验之用。

      enableDoubleClickZoom（）：

设置可以双击缩放地图，左键双击为放大，右键双击为缩小（默认）。

      disableDoubleClickZoom（）：

禁止双击缩放地图，GoogleEarth默认为禁止双击缩放。

      doubleClickZoomEnabled（）：

返回地图是否可以双击缩放的布尔值。

假如能够双击缩放，返回"真"；

      enableContinuousZoom（）：

设置地图可以连续平滑地缩放。

      disableContinuousZoom（）：

禁止地图连续平滑地缩放。

      continuousZoomEnabled（）：

返回地图是否可以连续平滑地缩放的布尔值。

假如能够连续平滑地缩放，返回"真"；否则返回"假"。

      enableScrollWheelZoom（）：

设置地图可以由鼠标滚轮控制缩放。

      disableScrollSheelZoom（）：

禁止由鼠标滚轮控制地图缩放。

      scrollWheelZoomEnabled（）：

返回地图缩放是否可以由鼠标滚轮控制。

假如能够由鼠标滚轮控制缩放，返回"真"；否则返回"假"。

      isLoaded（）返回类型布尔值假如地图已经被setCenter（）初始化，则返回true.

   2.得到地图的数据信息方法：

      getCenter（）返回类型GLatLng返回地图中心点的地图坐标.

      getBounds（）返回类型GLatLngBounds返回地图视口范围的矩形区域的地理坐标.

      getBoundsZoomLevel（bounds）返回类型数字返回显示指定的区域需要的最适合的地图缩放等级.该缩放等级是根据当前的地图类型计算出来的，假如还没有指定地图类型,将使用地图类型数组之中的第一项.

      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）从当前地图上删除一个地图类型。

     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.控件的方法：

   addControl（GControl）添加一个google地图的控件

   RemoveControl（GControl）删除一个google地图的控件

   7.示例：

     varmap=newMap2（document.getElementByIdx_x_x（"map"）,{size:

GSize（200,200）,backgroundColor:

"#FF0000"}）;

     map.addControl（newGSmallMapControl（））;//添加一个地图左侧的缩放按钮控件

     map.addControl（newGMapTypeControl（））;//添加地图类型控件包括普通地图、卫星地图、混合地图

     map.setCenter（newGLatLng（37.4419,-122.1419）,13）;//实例化一个维度为37.4419、经度为-122.1419的经纬度实例，然后设置地图的中心。

地图缩放值为13

     //Add10markersinrandomlocationsonthemap

     varbounds=map.getBounds（）;//得到地图四面的边界值

     varsouthWest=bounds.getSouthWest（）;//西南的经纬度

     varnorthEast=bounds.getNorthEast（）;//东北的经纬度

     varlngSpan=northEast.lng（）-southWest.lng（）;//经度差

     varlatSpan=northEast.lat（）-southWest.lat（）;//维度差

     //实例化一个在本张地图中的一个经纬度

     varpoint=newGLatLng（southWest.lat（）+latSpan*Math.random（）,

                         southWest.lng（）+lngSpan*Math.random（））;

     varmarker=newGMarker（point）;//实例化一个标点

     //给标点加click事件，当点击标点时弹出一个信息窗

     GEvent.addListener（marker,"click",function（）{

     marker.openInfoWindowHtml（"hello"）;

     }）;

    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移到数组的第一项就可以了。

  3.draggableCursor、draggingCursor

   这两个选项是用来定义地图上你的光标类型，我把它们放在一起介绍不等于它们必须一起使用，你可以单独使用任何一个。

其中，draggableCursor是地图可拖拽状态（默认就是可拖拽的）下的光标，draggingCursor是拖拽地图时的光标，对应的值和你在JavaScript里面设置其他的光标时使用的值一样，比如，

{draggableCursor:

"crosshair",draggingCursor:

"move"}。

当然，你也可以使用url形式加上你自己的图标

  4.backgroundColor

   在地图图块的图片还没有传送完成之前，地图的显示区域默认会使用灰色填充，这个就是backgroundColor可以发挥作用的地方了，你可以把灰色换成其他任何符合W3C标准的颜色

 5.googleBarOptions

   这个和你在地图上通过GMap2.enableGoogleBar（）时有关系，指定你添加GoogleBar时的一些默认属性

 示例：

  varoptions={size:

GSize（400,300）,backgroundColor:

"#FF0000"};

  varmap=newGMap2（document.getElementByIdx_x_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包含的主要方法：

     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开始）

     16.show（）none假如当前标记不可见，则显示标记。

注：

假如当前标记不可见，则此函数会触发GMarker.visibilitychanged事件。

（自2.77开始）

     17.isHidden（）Boolean假如当前标记不可见，则返回true。

否则，返回false。

（自2.77开始）

   示例：

     1.

      varpoint=newGLatLng（pointx,pointy）;

      varicon=newGIcon（）;

      icon.image="

      varmyMarker=newGMarker（point,icon）;

      alert（myMarker.getIcon（）.image）;

     2.

      varpoint=newGLatLng（pointx,pointy）;

      varmyMarker=newGMarker（point,{draggable:

true}）;//可拖拽的标记

      alert（myMarker.getPoint（））;

 4.GPolyline类

    构造函数

     GPolyline（latlngs,color?

weight?

opacity?

opts?

）根据顶点数组创建折线。

color是一个字符串，包含十六进制数字、HTML样式的颜色，即#RRGGBB。

weight是以像素表示的线宽度。

opacity为0到1之间的数字。

该线条是消除锯齿且半透明的。

   GPolyline包含的方法

      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假如当前折线不可见，则显示该线。

注：

假如当前折线不可见，则此函数会