可以在前端实现的几个地理位置小功能

下文转自：http://www.oncoding.cn/2010/geo-location-frontend

在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location，介绍了获取并处理用户地理位置的应用和方法，很有意思。结合原文的内容，加上之前的一些应用，整理了几个可以完全在前端实现的地理位置相关小功能。

1.通过IP获取 用户位置

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

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

@H_404_42@functiongeoip_country_code() { return'CN'; } functiongeoip_country_name() { return'China'; } functiongeoip_city() { return'Qingdao'; } functiongeoip_region() { return'25'; } functiongeoip_region_name() { return'Shandong'; } functiongeoip_latitude() { return'36.0986'; } functiongeoip_longitude() { return'120.3719'; } functiongeoip_postal_code() { return''; }

1

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

2.W3C共享位置接口

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

用法：

 
      @H_404_42@// if the browser supports the w3c geo api 
     
      01 
     
      @H_404_42@if(navigator.geolocation){ 
     
      02 
     
      @H_404_42@ // get the current position 
     
      03 
     
      @H_404_42@ navigator.geolocation.getCurrentPosition( 
     
      04 
     
      @H_404_42@ 
     
      05 
     
      @H_404_42@ // if this was successful,get the latitude and longitude 
     
      06 
     
      @H_404_42@ function(position){ 
     
      07 
     
      @H_404_42@ varlat = position.coords.latitude; 
     
      08 
     
      @H_404_42@ varlon = position.coords.longitude; 
     
      09 
     
      @H_404_42@ }, 
     
      10 
     
      @H_404_42@ // if there was an error 
     
      11 
     
      @H_404_42@ function(error){ 
     
      12 
     
      @H_404_42@ alert('ouch'); 
     
      13 
     
      @H_404_42@ }); 
     
      14 
     
      @H_404_42@} 
     
      15

看 DEMO

3. Google Gears 的 Geolocation API

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

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

 
      @H_404_42@vargeo = factory.create('beta.geolocation'); //创建geolocation对象 
     
      1 
     
      @H_404_42@varokCallback = function(d){ 
     
      2 
     
      @H_404_42@ alert('当前位置(纬度，经度): '+ d.latitude + ','+ d.longitude); 
     
      3 
     
      @H_404_42@}; 
     
      4 
     
      @H_404_42@varerrorCallback = function(err){ 
     
      5 
     
      @H_404_42@ alert(err.message); 
     
      6 
     
      @H_404_42@}; 
     
      7 
     
      @H_404_42@geo.getCurrentPosition(okCallback,errorCallback); 
     
      8

更多内容参考这篇文章：使用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为回调函数名。

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

 
      @H_404_42@myfunction && myfunction( { 
     
      001 
     
      @H_404_42@ "name": "36.06023,120.3024", 
     
      002 
     
      @H_404_42@ "Status": { 
     
      003 
     
      @H_404_42@ "code": 200, 
     
      004 
     
      @H_404_42@ "request": "geocode" 
     
      005 
     
      @H_404_42@ }, 
     
      006 
     
      @H_404_42@ "Placemark": [ { 
     
      007 
     
      @H_404_42@ "id": "p1", 
     
      008 
     
      @H_404_42@ "address": "中国山东省青岛市市南区台西三路6号-10号", 
     
      009 
     
      @H_404_42@ "AddressDetails": { 
     
      010 
     
      @H_404_42@ "Accuracy": 8, 
     
      011 
     
      @H_404_42@ "Country": { 
     
      012 
     
      @H_404_42@ "AdministrativeArea": { 
     
      013 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      014 
     
      @H_404_42@ "Locality": { 
     
      015 
     
      @H_404_42@ "DependentLocality": { 
     
      016 
     
      @H_404_42@ "DependentLocalityName": "市南区", 
     
      017 
     
      @H_404_42@ "Thoroughfare": { 
     
      018 
     
      @H_404_42@ "ThoroughfareName": "台西三路6号-10号" 
     
      019 
     
      @H_404_42@ } 
     
      020 
     
      @H_404_42@ }, 
     
      021 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      022 
     
      @H_404_42@ } 
     
      023 
     
      @H_404_42@ }, 
     
      024 
     
      @H_404_42@ "CountryName": "中国", 
     
      025 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      026 
     
      @H_404_42@ } 
     
      027 
     
      @H_404_42@}, 
     
      028 
     
      @H_404_42@ "ExtendedData": { 
     
      029 
     
      @H_404_42@ "LatLonBox": { 
     
      030 
     
      @H_404_42@ "north": 36.0633254, 
     
      031 
     
      @H_404_42@ "south": 36.0570301, 
     
      032 
     
      @H_404_42@ "east": 120.3054361, 
     
      033 
     
      @H_404_42@ "west": 120.2991409 
     
      034 
     
      @H_404_42@ } 
     
      035 
     
      @H_404_42@ }, 
     
      036 
     
      @H_404_42@ "Point": { 
     
      037 
     
      @H_404_42@ "coordinates": [ 120.3024027,36.0602271,0 ] 
     
      038 
     
      @H_404_42@ } 
     
      039 
     
      @H_404_42@ },{ 
     
      040 
     
      @H_404_42@ "id": "p2", 
     
      041 
     
      @H_404_42@ "address": "中国山东省青岛市市南区台西三路8号阿双美容美发厅", 
     
      042 
     
      @H_404_42@ "AddressDetails": { 
     
      043 
     
      @H_404_42@ "Accuracy": 9, 
     
      044 
     
      @H_404_42@ "Country": { 
     
      045 
     
      @H_404_42@ "AdministrativeArea": { 
     
      046 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      047 
     
      @H_404_42@ "Locality": { 
     
      048 
     
      @H_404_42@ "DependentLocality": { 
     
      049 
     
      @H_404_42@ "AddressLine": [ "阿双 美容美发厅"], 
     
      050 
     
      @H_404_42@ "DependentLocalityName": "市南区", 
     
      051 
     
      @H_404_42@ "Thoroughfare": { 
     
      052 
     
      @H_404_42@ "ThoroughfareName": "台西三路8号" 
     
      053 
     
      @H_404_42@ } 
     
      054 
     
      @H_404_42@ }, 
     
      055 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      056 
     
      @H_404_42@ } 
     
      057 
     
      @H_404_42@ }, 
     
      058 
     
      @H_404_42@ "CountryName": "中国", 
     
      059 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      060 
     
      @H_404_42@ } 
     
      061 
     
      @H_404_42@}, 
     
      062 
     
      @H_404_42@ "ExtendedData": { 
     
      063 
     
      @H_404_42@ "LatLonBox": { 
     
      064 
     
      @H_404_42@ "north": 36.0632366, 
     
      065 
     
      @H_404_42@ "south": 36.0569414, 
     
      066 
     
      @H_404_42@ "east": 120.3055696, 
     
      067 
     
      @H_404_42@ "west": 120.2992744 
     
      068 
     
      @H_404_42@ } 
     
      069 
     
      @H_404_42@ }, 
     
      070 
     
      @H_404_42@ "Point": { 
     
      071 
     
      @H_404_42@ "coordinates": [ 120.3024220,36.0600890,0 ] 
     
      072 
     
      @H_404_42@ } 
     
      073 
     
      @H_404_42@ },{ 
     
      074 
     
      @H_404_42@ "id": "p3", 
     
      075 
     
      @H_404_42@ "address": "中国青岛市市南区台西四路站", 
     
      076 
     
      @H_404_42@ "AddressDetails": { 
     
      077 
     
      @H_404_42@ "Accuracy": 9, 
     
      078 
     
      @H_404_42@ "AddressLine": [ "台西四路站"] 
     
      079 
     
      @H_404_42@}, 
     
      080 
     
      @H_404_42@ "ExtendedData": { 
     
      081 
     
      @H_404_42@ "LatLonBox": { 
     
      082 
     
      @H_404_42@ "north": 36.0630636, 
     
      083 
     
      @H_404_42@ "south": 36.0567684, 
     
      084 
     
      @H_404_42@ "east": 120.3063986, 
     
      085 
     
      @H_404_42@ "west": 120.3001034 
     
      086 
     
      @H_404_42@ } 
     
      087 
     
      @H_404_42@ }, 
     
      088 
     
      @H_404_42@ "Point": { 
     
      089 
     
      @H_404_42@ "coordinates": [ 120.3032510,36.0599160,0 ] 
     
      090 
     
      @H_404_42@ } 
     
      091 
     
      @H_404_42@ },{ 
     
      092 
     
      @H_404_42@ "id": "p4", 
     
      093 
     
      @H_404_42@ "address": "中国青岛市市南区云南路(台西四路口)站", 
     
      094 
     
      @H_404_42@ "AddressDetails": { 
     
      095 
     
      @H_404_42@ "Accuracy": 9, 
     
      096 
     
      @H_404_42@ "AddressLine": [ "云南路(台西四路口)站"] 
     
      097 
     
      @H_404_42@}, 
     
      098 
     
      @H_404_42@ "ExtendedData": { 
     
      099 
     
      @H_404_42@ "LatLonBox": { 
     
      100 
     
      @H_404_42@ "north": 36.0643586, 
     
      101 
     
      @H_404_42@ "south": 36.0580634, 
     
      102 
     
      @H_404_42@ "east": 120.3073456, 
     
      103 
     
      @H_404_42@ "west": 120.3010504 
     
      104 
     
      @H_404_42@ } 
     
      105 
     
      @H_404_42@ }, 
     
      106 
     
      @H_404_42@ "Point": { 
     
      107 
     
      @H_404_42@ "coordinates": [ 120.3041980,36.0612110,0 ] 
     
      108 
     
      @H_404_42@ } 
     
      109 
     
      @H_404_42@ },{ 
     
      110 
     
      @H_404_42@ "id": "p5", 
     
      111 
     
      @H_404_42@ "address": "中国青岛市市南区贵州路站", 
     
      112 
     
      @H_404_42@ "AddressDetails": { 
     
      113 
     
      @H_404_42@ "Accuracy": 9, 
     
      114 
     
      @H_404_42@ "AddressLine": [ "贵州路站"] 
     
      115 
     
      @H_404_42@}, 
     
      116 
     
      @H_404_42@ "ExtendedData": { 
     
      117 
     
      @H_404_42@ "LatLonBox": { 
     
      118 
     
      @H_404_42@ "north": 36.0614856, 
     
      119 
     
      @H_404_42@ "south": 36.0551904, 
     
      120 
     
      @H_404_42@ "east": 120.3036956, 
     
      121 
     
      @H_404_42@ "west": 120.2974004 
     
      122 
     
      @H_404_42@ } 
     
      123 
     
      @H_404_42@ }, 
     
      124 
     
      @H_404_42@ "Point": { 
     
      125 
     
      @H_404_42@ "coordinates": [ 120.3005480,36.0583380,0 ] 
     
      126 
     
      @H_404_42@ } 
     
      127 
     
      @H_404_42@ },{ 
     
      128 
     
      @H_404_42@ "id": "p6", 
     
      129 
     
      @H_404_42@ "address": "中国青岛市市南区团岛站", 
     
      130 
     
      @H_404_42@ "AddressDetails": { 
     
      131 
     
      @H_404_42@ "Accuracy": 9, 
     
      132 
     
      @H_404_42@ "AddressLine": [ "团岛站"] 
     
      133 
     
      @H_404_42@}, 
     
      134 
     
      @H_404_42@ "ExtendedData": { 
     
      135 
     
      @H_404_42@ "LatLonBox": { 
     
      136 
     
      @H_404_42@ "north": 36.0629146, 
     
      137 
     
      @H_404_42@ "south": 36.0566194, 
     
      138 
     
      @H_404_42@ "east": 120.3022496, 
     
      139 
     
      @H_404_42@ "west": 120.2959544 
     
      140 
     
      @H_404_42@ } 
     
      141 
     
      @H_404_42@ }, 
     
      142 
     
      @H_404_42@ "Point": { 
     
      143 
     
      @H_404_42@ "coordinates": [ 120.2991020,36.0597670,0 ] 
     
      144 
     
      @H_404_42@ } 
     
      145 
     
      @H_404_42@ },{ 
     
      146 
     
      @H_404_42@ "id": "p7", 
     
      147 
     
      @H_404_42@ "address": "中国山东省青岛市市南区团岛四路海湾花园", 
     
      148 
     
      @H_404_42@ "AddressDetails": { 
     
      149 
     
      @H_404_42@ "Accuracy": 9, 
     
      150 
     
      @H_404_42@ "Country": { 
     
      151 
     
      @H_404_42@ "AdministrativeArea": { 
     
      152 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      153 
     
      @H_404_42@ "Locality": { 
     
      154 
     
      @H_404_42@ "DependentLocality": { 
     
      155 
     
      @H_404_42@ "AddressLine": [ "海湾 花园"], 
     
      156 
     
      @H_404_42@ "DependentLocalityName": "市南区", 
     
      157 
     
      @H_404_42@ "Thoroughfare": { 
     
      158 
     
      @H_404_42@ "ThoroughfareName": "团岛四 路" 
     
      159 
     
      @H_404_42@ } 
     
      160 
     
      @H_404_42@ }, 
     
      161 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      162 
     
      @H_404_42@ } 
     
      163 
     
      @H_404_42@ }, 
     
      164 
     
      @H_404_42@ "CountryName": "中国", 
     
      165 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      166 
     
      @H_404_42@ } 
     
      167 
     
      @H_404_42@}, 
     
      168 
     
      @H_404_42@ "ExtendedData": { 
     
      169 
     
      @H_404_42@ "LatLonBox": { 
     
      170 
     
      @H_404_42@ "north": 36.0642706, 
     
      171 
     
      @H_404_42@ "south": 36.0579754, 
     
      172 
     
      @H_404_42@ "east": 120.3006386, 
     
      173 
     
      @H_404_42@ "west": 120.2943434 
     
      174 
     
      @H_404_42@ } 
     
      175 
     
      @H_404_42@ }, 
     
      176 
     
      @H_404_42@ "Point": { 
     
      177 
     
      @H_404_42@ "coordinates": [ 120.2974910,36.0611230,0 ] 
     
      178 
     
      @H_404_42@ } 
     
      179 
     
      @H_404_42@ },{ 
     
      180 
     
      @H_404_42@ "id": "p8", 
     
      181 
     
      @H_404_42@ "address": "中国山东省青岛市市南区", 
     
      182 
     
      @H_404_42@ "AddressDetails": { 
     
      183 
     
      @H_404_42@ "Accuracy": 4, 
     
      184 
     
      @H_404_42@ "Country": { 
     
      185 
     
      @H_404_42@ "AdministrativeArea": { 
     
      186 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      187 
     
      @H_404_42@ "Locality": { 
     
      188 
     
      @H_404_42@ "DependentLocality": { 
     
      189 
     
      @H_404_42@ "DependentLocalityName": "市南区" 
     
      190 
     
      @H_404_42@ }, 
     
      191 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      192 
     
      @H_404_42@ } 
     
      193 
     
      @H_404_42@ }, 
     
      194 
     
      @H_404_42@ "CountryName": "中国", 
     
      195 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      196 
     
      @H_404_42@ } 
     
      197 
     
      @H_404_42@}, 
     
      198 
     
      @H_404_42@ "ExtendedData": { 
     
      199 
     
      @H_404_42@ "LatLonBox": { 
     
      200 
     
      @H_404_42@ "north": 36.0954205, 
     
      201 
     
      @H_404_42@ "south": 36.0413849, 
     
      202 
     
      @H_404_42@ "east": 120.4266629, 
     
      203 
     
      @H_404_42@ "west": 120.2858189 
     
      204 
     
      @H_404_42@ } 
     
      205 
     
      @H_404_42@ }, 
     
      206 
     
      @H_404_42@ "Point": { 
     
      207 
     
      @H_404_42@ "coordinates": [ 120.3877350,36.0667110,0 ] 
     
      208 
     
      @H_404_42@ } 
     
      209 
     
      @H_404_42@ },{ 
     
      210 
     
      @H_404_42@ "id": "p9", 
     
      211 
     
      @H_404_42@ "address": "中国山东省青岛市", 
     
      212 
     
      @H_404_42@ "AddressDetails": { 
     
      213 
     
      @H_404_42@ "Accuracy": 4, 
     
      214 
     
      @H_404_42@ "Country": { 
     
      215 
     
      @H_404_42@ "AdministrativeArea": { 
     
      216 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      217 
     
      @H_404_42@ "Locality": { 
     
      218 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      219 
     
      @H_404_42@ } 
     
      220 
     
      @H_404_42@ }, 
     
      221 
     
      @H_404_42@ "CountryName": "中国", 
     
      222 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      223 
     
      @H_404_42@ } 
     
      224 
     
      @H_404_42@}, 
     
      225 
     
      @H_404_42@ "ExtendedData": { 
     
      226 
     
      @H_404_42@ "LatLonBox": { 
     
      227 
     
      @H_404_42@ "north": 36.3313685, 
     
      228 
     
      @H_404_42@ "south": 35.9407727, 
     
      229 
     
      @H_404_42@ "east": 120.6326294, 
     
      230 
     
      @H_404_42@ "west": 120.0970459 
     
      231 
     
      @H_404_42@ } 
     
      232 
     
      @H_404_42@ }, 
     
      233 
     
      @H_404_42@ "Point": { 
     
      234 
     
      @H_404_42@ "coordinates": [ 120.3827710,36.0663480,0 ] 
     
      235 
     
      @H_404_42@ } 
     
      236 
     
      @H_404_42@ },{ 
     
      237 
     
      @H_404_42@ "id": "p10", 
     
      238 
     
      @H_404_42@ "address": "中国山东省", 
     
      239 
     
      @H_404_42@ "AddressDetails": { 
     
      240 
     
      @H_404_42@ "Accuracy": 2, 
     
      241 
     
      @H_404_42@ "Country": { 
     
      242 
     
      @H_404_42@ "AdministrativeArea": { 
     
      243 
     
      @H_404_42@ "AdministrativeAreaName": "山东省" 
     
      244 
     
      @H_404_42@ }, 
     
      245 
     
      @H_404_42@ "CountryName": "中国", 
     
      246 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      247 
     
      @H_404_42@ } 
     
      248 
     
      @H_404_42@}, 
     
      249 
     
      @H_404_42@ "ExtendedData": { 
     
      250 
     
      @H_404_42@ "LatLonBox": { 
     
      251 
     
      @H_404_42@ "north": 38.4055838, 
     
      252 
     
      @H_404_42@ "south": 34.3851760, 
     
      253 
     
      @H_404_42@ "east": 122.7159599, 
     
      254 
     
      @H_404_42@ "west": 114.8033683 
     
      255 
     
      @H_404_42@ } 
     
      256 
     
      @H_404_42@ }, 
     
      257 
     
      @H_404_42@ "Point": { 
     
      258 
     
      @H_404_42@ "coordinates": [ 117.0198960,36.6692270,0 ] 
     
      259 
     
      @H_404_42@ } 
     
      260 
     
      @H_404_42@ } ] 
     
      261 
     
      @H_404_42@} 
     
      262 
     
      @H_404_42@) 
     
      263

Yahoo提供的接口

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

查询语句为：

@H_404_42@select* fromflickr.places wherelat=36.06023 andlon=120.3024

1

用法：

 
      @H_404_42@<script type="text/javascript"charset="utf-8"> 
     
      01 
     
      @H_404_42@functiongetPlaceFromFlickr(lat,lon,callback){ 
     
      02 
     
      @H_404_42@ // the YQL statement 
     
      03 
     
      @H_404_42@ varyql = 'select * from flickr.places where lat='+lat+' and lon='+lon; 
     
      04 
     
      @H_404_42@ 
     
      05 
     
      @H_404_42@ // assembling the YQL webservice API 
     
      06 
     
      @H_404_42@ varurl = 'http://query.yahooapis.com/v1/public/yql?q='+ 
     
      07 
     
      @H_404_42@ encodeURIComponent(yql)+'&format=json&diagnostics='+ 
     
      08 
     
      @H_404_42@ 'false&callback='+callback; 
     
      09 
     
      @H_404_42@ 
     
      10 
     
      @H_404_42@ // create a new script node and add it to the document 
     
      11 
     
      @H_404_42@ vars = document.createElement('script'); 
     
      12 
     
      @H_404_42@ s.setAttribute('src',url); 
     
      13 
     
      @H_404_42@ document.getElementsByTagName('head')[0].appendChild(s); 
     
      14 
     
      @H_404_42@}; 
     
      15 
     
      @H_404_42@ 
     
      16 
     
      @H_404_42@// callback in case there is a place found 
     
      17 
     
      @H_404_42@functionoutput(o){ 
     
      18 
     
      @H_404_42@ if(typeof(o.query.results.places.place) != 'undefined'){ 
     
      19 
     
      @H_404_42@ alert(o.query.results.places.place.name); 
     
      20 
     
      @H_404_42@ } 
     
      21 
     
      @H_404_42@} 
     
      22 
     
      @H_404_42@ 
     
      23 
     
      @H_404_42@// call the function with my current lat/lon 
     
      24 
     
      @H_404_42@getPlaceFromFlickr(36.6692270,117.0198960,'output'); 
     
      25 
     
      @H_404_42@</script> 
     
      26

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回调函数名。

举个例子，返回结果：

 
      @H_404_42@myfunction && myfunction( { 
     
      01 
     
      @H_404_42@ "name": "中国山东省青岛市市北区", 
     
      02 
     
      @H_404_42@ "Status": { 
     
      03 
     
      @H_404_42@ "code": 200, 
     
      04 
     
      @H_404_42@ "request": "geocode" 
     
      05 
     
      @H_404_42@ }, 
     
      06 
     
      @H_404_42@ "Placemark": [ { 
     
      07 
     
      @H_404_42@ "id": "p1", 
     
      08 
     
      @H_404_42@ "address": "中国山东省青岛市市北区", 
     
      09 
     
      @H_404_42@ "AddressDetails": { 
     
      10 
     
      @H_404_42@ "Accuracy": 4, 
     
      11 
     
      @H_404_42@ "Country": { 
     
      12 
     
      @H_404_42@ "AdministrativeArea": { 
     
      13 
     
      @H_404_42@ "AdministrativeAreaName": "山东省", 
     
      14 
     
      @H_404_42@ "Locality": { 
     
      15 
     
      @H_404_42@ "DependentLocality": { 
     
      16 
     
      @H_404_42@ "DependentLocalityName": "市北区" 
     
      17 
     
      @H_404_42@ }, 
     
      18 
     
      @H_404_42@ "LocalityName": "青岛市" 
     
      19 
     
      @H_404_42@ } 
     
      20 
     
      @H_404_42@ }, 
     
      21 
     
      @H_404_42@ "CountryName": "中国", 
     
      22 
     
      @H_404_42@ "CountryNameCode": "CN" 
     
      23 
     
      @H_404_42@ } 
     
      24 
     
      @H_404_42@}, 
     
      25 
     
      @H_404_42@ "ExtendedData": { 
     
      26 
     
      @H_404_42@ "LatLonBox": { 
     
      27 
     
      @H_404_42@ "north": 36.1237216, 
     
      28 
     
      @H_404_42@ "south": 36.0515859, 
     
      29 
     
      @H_404_42@ "east": 120.4388307, 
     
      30 
     
      @H_404_42@ "west": 120.3107713 
     
      31 
     
      @H_404_42@ } 
     
      32 
     
      @H_404_42@ }, 
     
      33 
     
      @H_404_42@ "Point": { 
     
      34 
     
      @H_404_42@ "coordinates": [ 120.3748010,36.0876620,0 ] 
     
      35 
     
      @H_404_42@ } 
     
      36 
     
      @H_404_42@ } ] 
     
      37 
     
      @H_404_42@} 
     
      38 
     
      @H_404_42@) 
     
      39

6.google maps 图片接口

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

引入图片的url格式为：

 
      @H_404_42@http://maps.google.com/maps/api/staticmap? 
     
      01 
     
      @H_404_42@ 
     
      02 
     
      @H_404_42@sensor=false 
     
      03 
     
      @H_404_42@&size=200x200 
     
      04 
     
      @H_404_42@&maptype=roadmap 
     
      05 
     
      @H_404_42@&key=<em>你申请到的KEY</em> 
     
      06 
     
      @H_404_42@&markers=color:blue|label:1|37.4447,-122.161 
     
      07 
     
      @H_404_42@&markers=color:red|label:2|37.3385,-121.886 
     
      08 
     
      @H_404_42@&markers=color:green|label:3|37.3716,-122.038 
     
      09 
     
      @H_404_42@&markers=color:yellow|label:4|37.7792,-122.42 
     
      10

得到图片：

后记

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

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