Google maps API开发（二）

这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder：

主要功能包括地址解析、反向解析、本地搜索、周边搜索等，

我这里主要有两个实例：

实例一、当你搜索一个地名的时候，解析它的经纬度信息，并在地图上描点

实例二、搜索你的中心点所在区域的学校、商店等信息，并在地图上描点

首先来讲讲实例一怎么实现：

1、加载google api

<script

type="text/javascript"src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

2、定义通用的全局变量和公共方法

varmap;//GMap2的核心对象

vargeocoder=null;//用来解析的

varmarkers=newArray();//用来存放GMarker

//======在地图上描点的方法============

functioncreateMarker(icon,point,html,index) {

varletter=String.fromCharCode("A".charCodeAt(0) +index);

icon.image="http://ditu.google.com/mapfiles/marker"+letter+".png";

varmarker=newGMarker(point,icon);

GEvent.addListener(marker,"click",function() {

marker.openInfoWindowHtml(html);

});

markers.push(marker);

map.addOverlay(marker);

}

//查询点击事件

functionshowLocation() {

map.clearOverlays();

document.getElementById('divOutput').innerHTML="搜索中...";

varaddress=document.getElementById('txtAddress').value;

geocoder.getLocations(address,cb_showLocation);//搜索的核心方法

}

//回调事件，主要在界面上描点和右侧产生列表信息

functioncb_showLocation(result) {

//显示结果

if(result.Status.code==G_GEO_SUCCESS)

{

document.getElementById("divOutput").innerHTML="成功("+result.Placemark.length+")<br />";

varicon=newGIcon(G_DEFAULT_ICON);

varlat,lng,point,address,marker;

for(vari= 0;i<result.Placemark.length;i++) {

lat=result.Placemark[i].Point.coordinates[1];// lat

lng=result.Placemark[i].Point.coordinates[0];// lng

address=result.Placemark[i].address;//地址

point=newGLatLng(lat,lng);

document.getElementById("divOutput").innerHTML+= ((i+ 1) +" "+address+" <small>"+point.toString() +"</small><br />");

createMarker(icon,point,address,i);

}

}

else{

document.getElementById("divOutput").innerHTML=result.Status.code;

}

}

3、地图初始化

functioninit() {

//检查浏览器的兼容性.

if(GBrowserIsCompatible()) {

map=newGMap2(document.getElementById("map_canvas"));

//设置地图的中心坐标.

varloc=newGLatLng(39.990168, 116.295304);

map.setCenter(loc, 5);

//创建带有可在四个方向平移、放大、缩小的按钮，以及缩放滑块的控件。

map.addControl(newGLargeMapControl());

//创建带有切换地图类型的按钮的控件。

map.addControl(newGMapTypeControl());

//设置地图支持滚轮

map.enableScrollWheelZoom();

//实例化一个地址解析

geocoder=newGClientGeocoder();

}

}

4、定义页面加载事件和卸载事件

window.onload=init;

window.onunload=GUnload;

//========主界面==================

<!--地图画板-->

<inputtype="text"id="txtAddress"name="txtAddress"size="40"/><inputtype="button"value="查询"onclick="showLocation();"/>

<divid="map_canvas"style="width:600px;height:500px;float:left;"></div>

<divid="divOutput"style="float:left;"></div>

//==============================

主要第一个例子就完成了，效果如下

实例二

1、加载google api，这里用到三个

<scripttype="text/javascript"src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

<scripttype="text/javascript"src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>

<scripttype="text/javascript"src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"></script>

2、通用核心类、全局变量和公共方法

varmap;

varhasMarker=false;

varmarkers=newArray();

varKMapSearch=window.KMapSearch=function(map_,opts_)

{

this.opts= {keyWord:opts_.keyWord||"",latlng:opts_.latlng||newGLatLng(31, 121),autoClear:opts_.autoClear||true,icon:opts_.icon||newGIcon(G_DEFAULT_ICON) };

this.map=map_;

this.gLocalSearch=newgoogle.search.LocalSearch();

this.gLocalSearch.setCenterPoint(this.opts.latlng);

this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

this.gLocalSearch.setSearchCompleteCallback(this,myTips);

}

//请除所有查询结果

KMapSearch.prototype.clearAll=function() {

for(vari= 0;i<markers.length;i++) {this.map.removeOverlay(markers[i]); }

markers.length= 0;

}

//开始查询

KMapSearch.prototype.execute=function(latLng) {

if(latLng) {this.gLocalSearch.setCenterPoint(latLng); }

this.gLocalSearch.execute(this.opts.keyWord);

}

//取得查询结果，并以DIV的方式展示

KMapSearch.prototype.getResult=function(result,i) {

varcontainer=document.createElement("div");

container.className="list";

varmyRadom= (newDate()).getTime().toString() +Math.floor(Math.random() * 10000);

container.id=myRadom;

container.innerHTML=i+"、"+result.title+"<br />地址："+result.streetAddress;

//this.createMarker(new GLatLng(result.lat, result.lng), result.html, myRadom);

returncontainer;

}

3、载入事件和辅助方法

//载入

functionOnLoad() {

if(GBrowserIsCompatible()) {

map=newGMap2(document.getElementById("map_canvas"));

map.addControl(newGLargeMapControl());

map.addControl(newGMenuMapTypeControl());

map.addControl(newGOverviewMapControl());

map.enableScrollWheelZoom();

map.setCenter(newGLatLng(39.990168, 116.295304), 10);

//添加右键单击事件

GEvent.addListener(map,"singlerightclick",function(point) {

varinitPt=map.fromContainerPixelToLatLng(point);

map.clearOverlays();

marker=newGMarker(initPt, {draggable:true});

if(hasMarker) {

marker.setLatLng(initPt);

map.panTo(initPt);

}

else{

//拖拽事件

GEvent.addListener(marker,"dragend",function() {

initPt=marker.getLatLng();

map.panTo(initPt);

searchMap(initPt);

});

hasMarker=true;

}

map.addOverlay(marker);

searchMap(initPt);

});

}

}

//点击提示信息

functionmyTips() {

varcontent="";

varresultdiv=document.getElementById("map");

for(j= 0;j<markers.length;j++) {

map.removeOverlay(markers[j]);

}

markers.length= 0;

varresults=this.gLocalSearch.results;

varicon=newGIcon(G_DEFAULT_ICON);

varsavedResults=document.getElementById("schollContainer");

if(this.gLocalSearch.results)

{

if(this.opts.autoClear) {

savedResults.innerHTML="";

}

for(vari= 0;i<results.length;i++) {

content='<p>'+'名称:'+results[i].title+'<br />'+'地址:'+results[i].streetAddress+'<br />'+'坐标:'+results[i].lat+','+results[i].lng+'</p>';

myCreateMarker(newGPoint(results[i].lng,results[i].lat),icon,content,i);

savedResults.appendChild(this.getResult(this.gLocalSearch.results[i],i+ 1));

}

}

}

//地图上标注

functionmyCreateMarker(point,icon,html,index) {

varletter=String.fromCharCode("A".charCodeAt(0) +index);

icon.image="http://ditu.google.com/mapfiles/marker"+letter+".png";

varmarker=newGMarker(point,icon);

GEvent.addListener(marker,"click",function() {marker.openInfoWindowHtml(html); });

markers.push(marker);

map.addOverlay(marker);

}

//在给定的坐标附近搜索指定的关键字

functionsearchMap(initPt) {

varmyIcon=newGIcon(G_DEFAULT_ICON);

varmapSearch=newKMapSearch(map, {latlng:initPt,icon:myIcon,keyWord:"驾校"});

mapSearch.clearAll();

mapSearch.execute();

}

5、最后

window.onload=OnLoad;

window.onunload=GUnload;

//========主界面==================

<!--地图画板-->

<divid="map_canvas"style="width:640px;height:480px;float:left;"></div>

<divstyle="width:4px;height:480px;float:left;"></div>

<divid="searchResult">驾校：<divid="schollContainer"></div></div>

//==============================

搞定，最后的效果如图：