今天我们来学习Google的地址解析。
从上面两节我们可以试着做一个以某一个地理坐标为中心的矩形地图,这个没问题,但是在实际操作当中人们是不会输入地理坐标的,而是输入一些人们可以认知的描述地址信息的字符串,当接收到这样的字符串以后我们就需要地址解析了,即将字符串解析为地理坐标。我们需要用到这么一个对象GClientGeocoder,来看看他的用法吧:
地址解析对象:GClientGeocoder
可以通过 GClientGeocoder
对象访问 Google 地图 API 地址解析服务。使用 GClientGeocoder.getLatLng()
将字符串地址转换为 GLatLng
。此方法采用要转换的字符串地址以及在检索到地址后要执行的回调函数作为参数。该回调函数是必要的,他的参数就是解析出来的地理坐标,这下知道该怎么处理了吧,很简单。
上代码更容易理解:
- <!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>Google Maps JavaScript API Example</title>
- <mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false"
- type="text/javascript"></mce:script>
- <!--这里就是Google map API开发的JavaScript代码 -->
- <mce:script type="text/javascript"><!--
- var geocoder = null;
- var map = null;
- function initialize() {
- if (GBrowserIsCompatible()) {
- map = new GMap2(document.getElementById("map_canvas"));
- geocoder = new GClientGeocoder(); //地址解析对象
- map.addControl(new GLargeMapControl());
- map.addControl(new GMapTypeControl());
- map.setMapType(G_NORMAL_MAP);
- map.setCenter(new GLatLng(39.9493, 116.3975), 13);
- }
- }
- function showAddress(address) {
- if(geocoder){
- geocoder.getLatLng(
- address,
- function(point) {
- if (!point) {
- alert("无法解析:" + address);
- } else {
- map.setCenter(point, 13);
- //创建一个标记对象
- var marker = new GMarker(point);
- //创建一个标记叠加层
- map.addOverlay(marker);
- //打开一个信息窗口
- marker.openInfoWindowHtml(address);
- }
- }
- );
- }
- }
- // --></mce:script>
- </head>
- <body onload="initialize()" onunload="GUnload()">
- <input type="text" id="address" name="address" /> <button onclick="showAddress(document.getElementById('address').value);">提交</button>
- <div id="map_canvas" style="width:800px;height:600px;"></div>
- </body>
- </html>
代码简介:
var marker = new GMarker(point);
以地理坐标对象为参数创建一个标记
map.addOverlay(marker);
添加一个标记形式的叠加层
什么是叠加层请看这里:http://code.google.com/intl/zh-CN/apis/maps/documentation/overlays.html
//打开一个信息窗口
marker.openInfoWindowHtml(address);
什么是信息窗口请看这里:http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html#Info_Windows
想要了解更多关于地址解析对象的请看这里:http://code.google.com/intl/zh-CN/apis/maps/documentation/services.html#Geocoding