1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置，通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端，或者有其他的特殊原因(比如，懒:)，也有一些其他办法来快速的获取用户位置。

maxmind.com提供了一个服务，通过引入一个js文件(http://j.maxmind.com/app/geoip.js)，可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容：

function geoip_country_code() { return 'CN'; }
function geoip_country_name() { return 'China'; }
function geoip_city() { return 'Qingdao'; }
function geoip_region() { return '25'; }
function geoip_region_name() { return 'Shandong'; }
function geoip_latitude() { return '36.0986'; }
function geoip_longitude() { return '120.3719'; }
function geoip_postal_code() { return ''; }

我们就可以利用这些信息做很多东西了：DEMO

另外，腾讯也有一个类似的接口，地址为 http://fw.qq.com/ipaddress，可以得到访问者的省、市信息，返回的格式如下：

var IPData = new Array("123.235.153.126","","山东省","青岛市");

具体的应用可以看这里： 断桥残雪WordPress天气插件

2.W3C共享位置接口

HTML5加入了的贡献地理位置的浏览器API接口，目前firefox3.5等浏览器已经支持这一功能。

用法：

// if the browser supports the w3c geo api
if(navigator.geolocation){
  // get the current position
  navigator.geolocation.getCurrentPosition(

  // if this was successful, get the latitude and longitude
  function(position){
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
  },
  // if there was an error
  function(error){
    alert('ouch');
  });
}

看 DEMO

3. Google Gears 的 Geolocation API

Google Gears是主要提供本地存储功能的浏览器扩展，新版本的Gears中，加入了判断用户地理位置的API，通过IP、WIFI热点等判断位置。不过Gears的使用似乎并不太广泛(Chrome内置了Gears，其他浏览器需要安装)，国内的地理位置信息也不够丰富，所以这个应用目前只可作为参考。

使用Gears的基本方法看这里，引入gears_init.js，使用Geolocation API的程序为：

var geo = factory.create('beta.geolocation'); //创建geolocation对象
var okCallback = function(d){
  alert('当前位置(纬度，经度): ' + d.latitude + ',' + d.longitude);
};
var errorCallback = function(err){
  alert(err.message);
};
geo.getCurrentPosition(okCallback , errorCallback);

更多内容参考这篇文章：使用Gears获取当前地理位置，以及DEMO。

4.逆经纬度解析

通过浏览器API等方式得到经纬度后，有时需要得到对应的城市名，这就是逆经纬度解析。

google maps api提供了一些经纬度解析方法，如果我们不想引入庞大的api，可以直接使用他的请求地址，通过jsonp方式得到google的经纬度解析数据。jsonp请求地址形式为：

http://ditu.google.cn/maps/geo?
output=json&oe=utf-8&q=纬度%2C经度
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为经纬度，参数callback为回调函数名。

可以看下这个地址的返回结果，数据非常丰富，并且还是中文的：

myfunction && myfunction( {
  "name": "36.06023, 120.3024",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "中国山东省青岛市市南区台西三路6号-10号",
    "AddressDetails": {
   "Accuracy" : 8,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "台西三路6号-10号"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0633254,
        "south": 36.0570301,
        "east": 120.3054361,
        "west": 120.2991409
      }
    },
    "Point": {
      "coordinates": [ 120.3024027, 36.0602271, 0 ]
    }
  }, {
    "id": "p2",
    "address": "中国山东省青岛市市南区台西三路8号阿双美容美发厅",
    "AddressDetails": {
   "Accuracy" : 9,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "AddressLine" : [ "阿双美容美发厅" ],
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "台西三路8号"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0632366,
        "south": 36.0569414,
        "east": 120.3055696,
        "west": 120.2992744
      }
    },
    "Point": {
      "coordinates": [ 120.3024220, 36.0600890, 0 ]
    }
  }, {
    "id": "p3",
    "address": "中国青岛市市南区台西四路站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "台西四路站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0630636,
        "south": 36.0567684,
        "east": 120.3063986,
        "west": 120.3001034
      }
    },
    "Point": {
      "coordinates": [ 120.3032510, 36.0599160, 0 ]
    }
  }, {
    "id": "p4",
    "address": "中国青岛市市南区云南路(台西四路口)站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "云南路(台西四路口)站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0643586,
        "south": 36.0580634,
        "east": 120.3073456,
        "west": 120.3010504
      }
    },
    "Point": {
      "coordinates": [ 120.3041980, 36.0612110, 0 ]
    }
  }, {
    "id": "p5",
    "address": "中国青岛市市南区贵州路站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "贵州路站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0614856,
        "south": 36.0551904,
        "east": 120.3036956,
        "west": 120.2974004
      }
    },
    "Point": {
      "coordinates": [ 120.3005480, 36.0583380, 0 ]
    }
  }, {
    "id": "p6",
    "address": "中国青岛市市南区团岛站",
    "AddressDetails": {
   "Accuracy" : 9,
   "AddressLine" : [ "团岛站" ]
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0629146,
        "south": 36.0566194,
        "east": 120.3022496,
        "west": 120.2959544
      }
    },
    "Point": {
      "coordinates": [ 120.2991020, 36.0597670, 0 ]
    }
  }, {
    "id": "p7",
    "address": "中国山东省青岛市市南区团岛四路海湾花园",
    "AddressDetails": {
   "Accuracy" : 9,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "AddressLine" : [ "海湾花园" ],
               "DependentLocalityName" : "市南区",
               "Thoroughfare" : {
                  "ThoroughfareName" : "团岛四路"
               }
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0642706,
        "south": 36.0579754,
        "east": 120.3006386,
        "west": 120.2943434
      }
    },
    "Point": {
      "coordinates": [ 120.2974910, 36.0611230, 0 ]
    }
  }, {
    "id": "p8",
    "address": "中国山东省青岛市市南区",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市南区"
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.0954205,
        "south": 36.0413849,
        "east": 120.4266629,
        "west": 120.2858189
      }
    },
    "Point": {
      "coordinates": [ 120.3877350, 36.0667110, 0 ]
    }
  }, {
    "id": "p9",
    "address": "中国山东省青岛市",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.3313685,
        "south": 35.9407727,
        "east": 120.6326294,
        "west": 120.0970459
      }
    },
    "Point": {
      "coordinates": [ 120.3827710, 36.0663480, 0 ]
    }
  }, {
    "id": "p10",
    "address": "中国山东省",
    "AddressDetails": {
   "Accuracy" : 2,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省"
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 38.4055838,
        "south": 34.3851760,
        "east": 122.7159599,
        "west": 114.8033683
      }
    },
    "Point": {
      "coordinates": [ 117.0198960, 36.6692270, 0 ]
    }
  } ]
}
 )

Yahoo提供的接口

雅虎提供了一些经纬度查询接口，可以使用YQL查询。

查询语句为：

select * from flickr.places where lat=36.06023 and lon=120.3024

用法：

<script type="text/javascript" charset="utf-8">
 function getPlaceFromFlickr(lat,lon,callback){
   // the YQL statement
   var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;

   // assembling the YQL webservice API
   var url = 'http://query.yahooapis.com/v1/public/yql?q='+
              encodeURIComponent(yql)+'&format=json&diagnostics='+
              'false&callback='+callback;

   // create a new script node and add it to the document
   var s = document.createElement('script');
   s.setAttribute('src',url);
   document.getElementsByTagName('head')[0].appendChild(s);
 };

 // callback in case there is a place found
 function output(o){
   if(typeof(o.query.results.places.place) != 'undefined'){
     alert(o.query.results.places.place.name);
   }
 }

 // call the function with my current lat/lon
 getPlaceFromFlickr(36.6692270,117.0198960,'output');
</script>

使用YQL进行更多地理信息查询，可以看这个PPT：YQL Geo Library and Introduction to Geo Hacking talk

5.经纬度解析

经纬度解析就是通过地名取得经纬度数据，同样利用google那个请求地址，可以实现这一功能，请求地址格式为：

http://ditu.google.cn/maps/geo?output=json&oe=utf-8
&q=地名的url encode编码
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为encodeURI(“中国山东省青岛市市北区”)，callback是jsonp回调函数名。

举个例子，返回结果：

myfunction && myfunction( {
  "name": "中国山东省青岛市市北区",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "中国山东省青岛市市北区",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "山东省",
         "Locality" : {
            "DependentLocality" : {
               "DependentLocalityName" : "市北区"
            },
            "LocalityName" : "青岛市"
         }
      },
      "CountryName" : "中国",
      "CountryNameCode" : "CN"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 36.1237216,
        "south": 36.0515859,
        "east": 120.4388307,
        "west": 120.3107713
      }
    },
    "Point": {
      "coordinates": [ 120.3748010, 36.0876620, 0 ]
    }
  } ]
}
 )

6.google maps 图片接口

有时候我们只想展示简单的地图，不需要交互和拖动，可以通过google maps提供的静态地图API引入动态生成的地图图片，不过需要为你的域名申请一个key。

引入图片的url格式为：

http://maps.google.com/maps/api/staticmap?

sensor=false
&size=200x200
&maptype=roadmap
&key=<em>你申请到的KEY</em>
&markers=color:blue|label:1|37.4447,-122.161
&markers=color:red|label:2|37.3385,-121.886
&markers=color:green|label:3|37.3716,-122.038
&markers=color:yellow|label:4|37.7792,-122.42

得到图片：

后记

关于地图的更多操作，可以参见以前的这篇文章：Google Maps Api介绍与基础操作。

随着互联网的发展，越来越多的功能可以在前端实现，出现了越来越多的强大的第三方服务，我们可以很方便的在我们的网站上加入一些实用的功能。这也许就是web2.0的魅力吧。

点击”View subtitles”可以显示中文字幕

TED2010上，来自微软的Blaise Aguera y Arcas展示了全新的结合虚拟现实体验的Bing地图技术，震撼了在场观众。如果你还在感慨Google街景，那么看看这个吧。看看他们怎么把流畅的街景技术和实时动态影像、天文景观结合在一起。让用户仿佛徜徉在异国他乡。街景也不再局限于街道，在一个小市场里，你可以看到你朋友拍得照片动态匹配到他曾经所看到的位置上。

看到他们的实时video，这种能够将影像和地图街景动态匹配的技术看起来非常炫，不知道多久会出现在Bing里面。

现在看来，整合了silverlight技术的Bing Map,将会对Google Maps最终形成非常大的挑战。

建议保存到本地，方便随时查阅

地址:  http://oncoding.net/manuals/buslist.htm

示例：

青岛市
1路上行(湖北路-四方)
1路下行(四方-湖北路)
10路(板桥坊-板桥坊)
11路上行(极地海洋世界-榉林公园)
11路下行(榉林公园-极地海洋世界)
12路(海洋地质所-开封路)
12路区间(海洋地质所-沙岭庄)
15路(天泰体育场-天泰体育场)
19路上行(台东(菜市二路)-汽车东站)
19路下行(汽车东站-台东(菜市二路))
101路(沧口公园-中韩小商品城)
102路上行(海游路-李村公园)
102路下行(李村公园-海游路)
103路(城阳十五中-李村)
104路上行(流清河-台东(威海路))
104路下行(台东(威海路)-流清河)
105路(李村-流亭市场)
106路(李村-垭口)
106路区间(李村-小庄)
109路(李村公园-港西)
110路(台东(威海路)-北九水)
110路支线(台东(威海路)-仰口)
111路(百盛崂山店-郝家营社区)
112路(板桥坊-卧龙村)
113路(板桥坊-流清河)
113路区间1(板桥坊-崂山六中)
113路区间2(李村公园-海大崂山校区)
114路(李村公园-409医院)

。。。。

“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的入门教程吧。

青岛教堂

爷爷家的老房子

地图很新，说不定就能看到逛街的你

哈哈，Here

另外他们提供了收费API，可以开发很多好玩的应用：http://www.dujiala.com/

这里是Google对此算法的说明：http://code.google.com/intl/zh-CN/apis/maps/documentation/polylinealgorithm.html

这里是Google在线编码程序英文版(中文版目前出错不可用)：http://code.google.com/apis/maps/documentation/polylineutility.html

由于我们在实际开发中会经常对经纬度信息进行编码，在服务端使用PHP编码发送，在客户端使用JavaScript编码提交，今天对这两种语言的编码程序进行了整理，发出来共享，有需要的可以下载。

另外本人正在编写一系列PHP+Google Maps API的网站开发教程，欢迎关注，教程地址：oncoding.net

点击下载

幼学笔记原创内容，根据CC协议发布，欢迎具名转载。