200911/6月

分类：

TAGS：

评论

Google Maps Api介绍与基础操作 原

一. 关于Google Maps Api

“API”，即“应用程序编程接口”，是指软件或网站为第三方开发人员提供的接口，利用这个接口，可以使用软件的一些功能而不必了解它的内部机理。

具体拿Google Maps Api来说，它提供了一个JavaScript库，具体就是我们上节课在页面头部引入的这个url：http://ditu.google.com/maps?file=api&v=2&key=KEY ，它会自动载入地图所需的js文件，Firefox肿的Firebug插件是前端开发必备工具，使用它我们可以方便的查看网页的内容，可以看到Google Maps Api引入的几个JS文件：


( Google Maps Api引入的文件 )

Google Maps Api的作用是，将Google Maps服务器上的地图图片和数据下载到客户端并正确显示，显示程序定义的地标点、折线和多边形，实现地址搜索、驾车导航等扩展功能。你可以在网页中直接调用它定义的类和方法，而不必了解它的运行机制，当然这些js文件是可见的，需要的话你可以重载它的函数，来实现你想要的功能。

二. 概览Google Maps Api

使用Google Maps Api必不可少的东西就是其开发手册：http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html

我们可以看到，Google Maps Api的地图的显示、标点、划线等操作包含59个类，空间、叠加层等包含18个类。
看到这个长达一百多屏的参考手册，是不是有点晕？不要着急，在本节及以后的讲解中，我们只会学习并使用其中一部分的类来实现我们的功能。

三. 在自己的项目中使用Google Maps Api

Google Maps Api采用申请密钥的方式授权使用，每个密钥只能对应一个网站，当然，任何一个密钥都可以在Localhost上使用：），申请地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html
我们为apus.net.cn申请了一个密钥：


申请密钥成功


Google Map调用方式

申请成功的页面上给出了三种API调用方式：“JavaScript Maps API”、“Maps API for Flash”、“HTTP Service”，我们使用第一种 — JavaScript Maps API。

OK，下面我们一起看下Google Maps API如何引入地图，和一些基本的操作。

四. Google Maps Api基本功能

1.加载并显示地图

我们首先要加载Google Maps Api并显示了地图，

 <!DOCTYPE html "-//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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>显示地图</title>
    <!--引入Google Maps JS文件，此处key=你申请到的key-->
    <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAira30FR5tVprWCJ-8_WcqxSrc1zAT9YCtP2kOyoD7kBAJfliJBROJEdu9hUE13rp9a4OHneyOoW5gg" type="text/javascript"></script>
    <script type="text/javascript">
      //initMap()函数，将地图程序加入页面
      function initMap() {
        if (GBrowserIsCompatible()) {
          //在ID为"Gmap"的层内显示地图
          var map = new GMap2(document.getElementById("Gmap"));
          //设置地图中心点和缩放级别
          map.setCenter(new GLatLng(36.167, 120.407), 10);
        }
      }
    </script>
  </head>
  <body onload="initMap()" onunload="GUnload()">
    <!--定义显示地图的层-->
    <div id="Gmap" style="width: 600px; height: 400px"></div>
  </body>
</html>

这样，我们就很轻松的在网页上显示出了Google地图：

GMap2是Api中的中心类，作用为在给定的容器DIV中创建地图。可选参数opts.size可以设置地图大小，默认使用容器DIV的大小。

查看演示>>

2.添加控件

Google Maps的控件包括左侧的“鱼骨”控件和比例尺、右侧的地图类型按钮和小地图。

现在我们加载常用的四种控件：

          //加载大“鱼骨”，包含方向、缩放按钮和缩放级别控制滑块
          map.addControl(new GLargeMapControl());
          //加载地图类型按钮
          map.addControl(new GMapTypeControl());
          //加载小地图
          map.addControl(new GOverviewMapControl());
          //加载比例尺
          map.addControl(new GScaleControl());

此外，还有四种类型的控件，可以在小尺寸地图上选用：

GSmallMapControl() 小“鱼骨”，仅包含方向、缩放按钮
GSmallZoomControl() 更小“鱼骨”，仅包含缩放按钮
GMenuMapTypeControl() 下拉框式地图类型选择
GHierarchicalMapTypeControl() 按钮、下拉框组合式地图类型选择

具体见Api参考中的class GControl http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GControlImpl

查看演示>>

3. 在地图上添加标注

基本步骤为：定义一个经纬度点GLatLng，定义一个标注对象GMarker，在地图上加入标注GMap2.addOverlay()

          //定义一个经纬度点
          var point = new GLatLng(36.07868, 120.3599);
          //定义一个标注对象
          var marker = new GMarker(point);
          //在地图上加入标注
          map.addOverlay(marker);

我们还可以为这个标注添加气泡提示，这些要在addOverlay()之前定义：

          //定义字符串
          var info = "这是我的家<br/><font color='red'>市北区宁夏路**号</font>";
          //设置点击出现气泡，内容为预先定义的HTML字串
          marker.bindInfoWindowHtml(info);

查看演示>>

关于标注的其他操作、冒泡的方式内容等，还有几个其他的方法，具体可以阅读Api参考的class GMarker： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GMarker

4. 显示折线GPolyline、多边形GPolygon

在我们的Apus项目中，显示旅行路径、活动范围必不可少的地图要素就是折线和多边形，

在地图中添加折线的方法非常简单，下面这段程序显示了直升机从我爷爷家飞到学校放下行李然后去金沙滩游玩的路线^_^：

          //定义一个折线对象
          polyline = new GPolyline([
            //定义这线上的三个折点、线条颜色、宽度、透明度
            new GLatLng(36.07868,120.3599),
            new GLatLng(36.00259,120.1227),
            new GLatLng(35.95482,120.2426)
            ], //折点对象数组
            "#ff6600", //线条颜色
            3, //线条宽度
            0.9 //线条透明度
            );
          //将折线加入地图
          map.addOverlay(polyline);

查看演示>>

其他操作参见GPolyline类参考： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GPolyline

GPolyline的构造函数：GPolyline(latlngs, color?, weight?, opacity?, opts?)

其中opts? 为可选参数，class GPolylineOptions定义的属性，包括折线是否可点击clickable、表现地球弧度geodesic。
添加多边形的原理和折线类似：

          //定义一个多边形对象
          polygon = new GPolygon(
            [
               new GLatLng(36.17477,120.37609),
               new GLatLng(36.09167,120.49577),
               new GLatLng(36.06035,120.30181),
               new GLatLng(36.17477,120.37609)
            ], //折点对象数组
            "#FF6600", //线条颜色
            4, //线条宽度
            0.8, //线条透明度
            "#66FF00", //填充颜色
            0.5 //填充透明度
            );
          //将多边形加入地图
          map.addOverlay(polygon);

查看演示>>

其他操作参见GPolygon类参考： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GPolygon

GPolyline的构造函数： GPolygon(latlngs, strokeColor?, strokeWeight?, strokeOpacity?, fillColor?, fillOpacity?, opts?)
其class GPolygonOptions只包含clickable，即是否可点。

5. 经纬度编码

阅读了上边的内容，你可能会产生这样的疑问：如果一条轨迹或区域包含了成百上千个拐点，那岂不是很麻烦。没错，这里我们可以使用一个办法把这些点信息放在一串编码后的简短的字符串里，交给客户端去解码并显示，而我们的网络仅需要传输这一串编码，这里我们要用到GPolyline和GPolygon的工厂方法fromEncoded，

它的原型为：fromEncoded(color?, weight?, opacity?, latlngs, zoomFactor, levels, numLevels)
我们以一个例子来演示它，下面的代码展示了这样的路线：我们乘坐上面那架直升机，从轮渡码头飞往栈桥观光，但栈桥没有停机坪，我们只好转道飞往江苏路教堂游览，稍作停留后回到了宁夏路家中。

          //编码
          polyline  = new GPolyline.fromEncoded({
            color: "#FF6600",
            weight: 3,
            opacity: 0.9,
            /*
            未编码的折点数据：
            new GLatLng(36.066570000000006,120.30366000000001),
            new GLatLng(36.05875,120.32037000000001),
            new GLatLng(36.072480000000006,120.32842000000001),
            new GLatLng(36.079930000000004,120.35917)
            */
            points: agc{E{xg}Uzo@mgBytAiq@qm@e_E,  //折点编码
            zoomFactor: 32,  //levels字符串中邻近缩放级别集合之间的放大倍率
            levels: "BBBB",  //缩放级别编码
            numLevels: 4  //levels字符串中包含的缩放级别数
          });
         map.addOverlay(polyline);

查看演示>>

可以看到，编码后的数据变得非常轻巧，但是这一串字符是怎样编出来的呢？Google给出了一个在线编码工具，

中文版地址(目前有错误无法使用)：http://code.google.com/intl/zh-CN/apis/maps/documentation/polylineutility.html

英文版地址(目前可用)：http://code.google.com/apis/maps/documentation/polylineutility.html

这可以作为练习时的快速编码工具，但在实际的项目开发中，我们不可能把用户的每个点都手工去编码，由于编码的算法是公开的 ，我们可以自己编写程序来进行编码，这里有Javascript版和PHP版的编码程序：http://oncoding.cn/2009/gmaps-encode.html

五. Google Maps Api高级功能介绍

1.地址解析与逆地址解析

所谓“地址解析”，是指根据地点名称得到经纬度坐标；“逆地址解析”则是根据经纬度坐标得出其地点名称。这一功能在实际的地图开发中尤为有用。

Google Maps Api中的GClientGeocoder类提供了这一系列的功能，类参考见： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GClientGeocoder

举一个小例子来试一下，下面程序返回“栈桥”的坐标

          //地址解析
          geocoder = new GClientGeocoder();
          geocoder.getLatLng('栈桥', function(response) {
            alert (response);
          });

运行结果：

栈桥的坐标：(36.0647287, 120.3184891)

getLatLng方法的作用是返回查询地点的经纬度坐标；

另外一个方法getLocations，则同时具备了地址解析和逆地址解析的功能，它可以传入地点名称或坐标值，返回包括坐标、城市等更详细的数据。

     //initMap()函数，将地图程序加入页面
      function initMap() {
        //GBrowserIsCompatible()确定Api能否兼容当前浏览器
        if (GBrowserIsCompatible()) {
          //在ID为"Gmap"的层内显示地图
          var map = new GMap2(document.getElementById("Gmap"));
          //设置地图中心点和缩放级别
          map.setCenter(new GLatLng(36.09778, 120.37236), 12);
          //地址解析getLocations
          var geocoder = new GClientGeocoder();
          geocoder.getLocations('栈桥', function(response) {
            place = response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
            marker = new GMarker(point);
            map.addOverlay(marker);
            marker.openInfoWindowHtml(getGeocodeHtml(response));
          });
       }
     }
     //组装冒泡内的HTML数据
     function getGeocodeHtml(response){
       pname = response.name;
       paddress = response.Placemark[0].address;
       plat = response.Placemark[0].Point.coordinates[1];
       plon = response.Placemark[0].Point.coordinates[0];
       return("地点："+pname+"<br />位置："+paddress+"<br />坐标："+plat+","+plon);
     }

查看演示>>

getLocations以JSON格式返回如下数据，其Placemark可能有许多个，在实际使用时需要考虑多个返回值的情况。JSON格式是一种在JavaScript中使用非常简单方便的数据格式：

{
  "name": "栈桥",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "栈桥, 青岛市",
    "AddressDetails": {"AddressLine":["栈桥"],"Accuracy": 9},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0678763,
        "south": 36.0615811,
        "east": 120.3216367,
        "west": 120.3153415
      }
    },
    "Point": {
      "coordinates": [ 120.3184891, 36.0647287, 0 ]
    }
  } ]
}

2. 本地搜索

我们可以在地图上加入一个位置搜索框，只需要短短几行代码：

          //在ID为"Gmap"的层内显示地图，设置加载搜索框
          var map = new GMap2(document.getElementById("Gmap"),
                                                    {googleBarOptions: {showOnLoad : true}} );
          ....

          //加入搜索框
          map.enableGoogleBar();

查看演示>>

如果要使用更多可定制性的搜索，可以使用Google Ajax Search Api： http://code.google.com/intl/zh-CN/apis/ajaxsearch/ ，以后我们需要的话会进一步学习。

3. 驾车路线：

使用GDirections类可以获取驾车路线：

          //驾车导航
          driveLine = new GDirections(map);
          driveLine.load("from: 青岛 to: 烟台", { "locale": "zh-CN" });

查看演示>>

4. 静态地图

上一节课说过，Google Maps提供三种形式的API，其中一种是“静态地图API”，所谓静态，就是只生成一张图片，不会有任何交互功能。这种方式特别适用于手机的地图应用。

例如：http://www.oncoding.cn/wp-content/uploads/09img/2010/03/203309iz4.jpg

得到图片：

参数：center=地图中心点&zoom=缩放级别&size=宽x高&markers=第一个标点经度,纬度,颜色字母|第二个标点经度,纬度,颜色字母…&key=你的KEY

5. KML

KML是用于描述和保存地理信息（如点、线、图像、多边形和模型等）的一种数据语言，它以被Google Earth和Google Maps方便的识别并显示。现在很多便携式GPS设备和手机软件可以生成KML格式的路径文件，事实上已经成为了GPS设备的标准路径文件格式。
以下是一个KML文件的格式：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
 <name>zhanqiao.kml</name>
 <Style id="sh_ylw-pushpin">
  <IconStyle>
   <scale>1.3</scale>
   <Icon>
    <href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
   </Icon>
   <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
  </IconStyle>
 </Style>
 <Style id="sn_ylw-pushpin">
  <IconStyle>
   <scale>1.1</scale>
   <Icon>
    <href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
   </Icon>
   <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
  </IconStyle>
 </Style>
 <StyleMap id="msn_ylw-pushpin">
  <Pair>
   <key>normal</key>
   <styleUrl>#sn_ylw-pushpin</styleUrl>
  </Pair>
  <Pair>
   <key>highlight</key>
   <styleUrl>#sh_ylw-pushpin</styleUrl>
  </Pair>
 </StyleMap>
 <Placemark>
  <name>zhanqiao</name>
  <LookAt>
   <longitude>120.3157798974425</longitude>
   <latitude>36.05886498176855</latitude>
   <altitude>0</altitude>
   <range>739.971375569545</range>
   <tilt>4.084272649574626e-011</tilt>
   <heading>-0.1127864185136748</heading>
  </LookAt>
  <styleUrl>#msn_ylw-pushpin</styleUrl>
  <Point>
   <coordinates>120.3152418576393,36.05858830488904,0</coordinates>
  </Point>
 </Placemark>
</Document>
</kml>

其中包含主要的标签：Document，Document包含kml的文件信息和显示样式以及所有的地标点信息，每个地标信息对应一个Placemark标签。

KML中Placemark中主要标签的定义：
name 该地标名称
description 地标描述，支持HTML代码
LookAt 试图相关信息
styleUrl 样式
Point 地标点

查看演示>>

更具体的信息：http://www.step1.cn/googleapi/map/kml.htm

编程处理KML文件：

          //GGeoXml对象，处理KML文件
          var gXml = new GGeoXml("http://oncoding.net/demos/zhanqiao.kml");
          //将KML内容在地图上显示
          map.addOverlay(gXml);

后记

本节所有示例程序的压缩包可以在这里下载：http://code.google.com/p/apus/downloads/list 。注意要改成你自己的KEY，才能正常运行。

这篇文章其实是自己以前计划写的Google Maps API网站开发教程中的一节，后来因为种种原因，没能坚持吧教程写完。现在把这一节单独整理出来，作为一个Google Maps API的入门教程吧。

«
»

发表评论

*
*

文明评论，共同进步