google map开发学习笔记（三）

最新推荐文章于 2024-09-11 10:01:17 发布

转载最新推荐文章于 2024-09-11 10:01:17 发布 · 749 阅读

文章标签：

#google map开发学习笔记三

google map 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Google地图API中的GClientGeocoder对象进行地址解析，将描述性的地址字符串转换为地理坐标，并在地图上显示出来。

今天我们来学习Google的地址解析。

从上面两节我们可以试着做一个以某一个地理坐标为中心的矩形地图，这个没问题，但是在实际操作当中人们是不会输入地理坐标的，而是输入一些人们可以认知的描述地址信息的字符串，当接收到这样的字符串以后我们就需要地址解析了，即将字符串解析为地理坐标。我们需要用到这么一个对象GClientGeocoder，来看看他的用法吧：

地址解析对象：GClientGeocoder

可以通过 GClientGeocoder 对象访问 Google 地图 API 地址解析服务。使用 GClientGeocoder.getLatLng() 将字符串地址转换为 GLatLng 。此方法采用要转换的字符串地址以及在检索到地址后要执行的回调函数作为参数。该回调函数是必要的，他的参数就是解析出来的地理坐标，这下知道该怎么处理了吧，很简单。

上代码更容易理解：

[xhtml] view plain copy print ?

<!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>
<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>

<!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>
     
    <mce:script type="text/javascript"></mce:script> 
  </head>
  <body οnlοad="initialize()" οnunlοad="GUnload()">
  	<input type="text" id="address" name="address" /> <button οnclick="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