google maps api_js调用谷歌浏览器接口

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一：基本知识：

 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 指定具体版本。不建议使用。

    注：目前谷歌地图 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()：返回地图是否能够被拖动的布尔值。假如能够拖动，返回”真”；否则返回”假”。

       enableInfoWindow()：设置地图信息窗口可以弹出。

       disableInfoWindow()：禁止地图信息窗口弹出。

       infoWindowEnabled()：返回地图信息窗口是否能够被弹出的布尔值。假如能够弹出，返回”真”；否则返回”假”。这个方法通常作为检验之用。

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

       disableDoubleClickZoom()：禁止双击缩放地图，Google Earth 默认为禁止双击缩放。

       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. 示例：

      var map = new Map2(document.getElementByIdx_x_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);//实例化一个标点

 

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

 

   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_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.

       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包含的方法

       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>

             <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命名空间

     此命名空间包含的函数可用于注册事件处理程序（既处理自定义事件也处理 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地址解析类：

     此类用于和 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_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);

       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())来检查兼容性，但是，发现一个不兼容的浏览器时，它不会自动采取任何措施。 http://maps.google.com/maps?file=api&v=2里面的脚本似乎可以在任何浏览器里面解析而不产生错误，所以您可以在检查浏览器兼容性之前就包含脚本文件。

  

   六：相关资料的网址：

http://code.google.com/intl/zh-CN/apis/maps/

http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html

Google地图API的同步中文文档：http://www.codechina.org/doc/google/gmapapi/

百度文库：http://wenku.baidu.com/view/a2885c27a5e9856a561260b2.html

csdn博客：http://blog.csdn.net/jiali765/archive/2010/03/03/5338265.aspx

http://www.jbedu.com/study/jishuwenzhang/196.html