转眼之间我的blog访问量已经超过9万了,值得庆贺一下.今天放个重量级炸弹出来.
很多使用google地图的同学肯定都想实现标注周边环境的功能,该功能可参照http://local.google.com/
只要我们在地图上输入学校,进行搜索之后地图就可以自动把周围的学校给标记出来.该功能很强,实现起来却非常麻烦,这需要借助google的多个API才能实现,首先是map其次分别是localsearch和ajax.另外如果你要使用这个搜索功能,就必须要申请一个key,
申请地址是:http://code.google.com/intl/zh-TW/apis/maps/signup.html
接下来我就直接发代码了. 欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Search API Sample</title>
<script src="http://www.google.com/jsapi?key=这个key你需要自己去google申请"></script>
<script type="text/javascript">
google.load('search','1');
var localSearch;
function searchComplete(){
if(localSearch.results && localSearch.results.length>0){
for(var i=0;i<localSearch.results.length;i++){
var lr = localSearch.results[i];
//如果你要在你的地图内标记,那么下边的三行你可以删掉,换成用地址在地图标记的代码就行了.
var a = document.createElement('a');
a.innerHTML = "<br><a href='"+lr.url+"' target='_blank'>"+lr.title+"</a><br>地址:"+lr.region+" "+lr.city+" "+lr.streetAddress+"<br>";
document.body.appendChild(a);
}
}
}
function onLoad(){
localSearch = new google.search.LocalSearch();
localSearch.setCenterPoint("台灣桃園縣");
//搜索完之後的回調函數
localSearch.setSearchCompleteCallback(this,searchComplete,null);
localSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
//要搜索的關鍵字
localSearch.execute('學校');
}
//入口
google.setOnLoadCallback(onLoad);
</script>
</head>
<body style="font-family:Arial;font-size:12px;">
</body>
</html>
上边的代码我已经把桃园周围的学校给搜出来了,至于如何标记到地图上那就简单了,原理很简单,我们通过上边的代码已经把学校的地址给抓出来了,有了地址我们就能够通过地址标记的方式在地图上做标记了.代码如下
$('#test').gmap3({
action:'addMarker',address:"台灣桃園縣八德市重慶街188巷61弄22號",
map:{center:true,zoom:14,mapTypeId:google.maps.MapTypeId.TERRAIN}
});
上边这段代码之所以这么简单,是因为我使用了一个美国人封装的jquery扩展
这个扩展可以从http://gmap3.net/download.html下载到.此人把google map v3.0的类用jquery封装成了一个插件,调用的时候非常简单.本来我想找一下localsearch的jquery的,但是放狗找了半天却无果.有知道的童鞋麻烦你留言和我说一声.
下邊的代碼是我用Jquery對其進行了一次封裝,既然網上找不到,那我就自己動手豐衣足食吧!
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Search API Sample</title>
<script type="text/javascript" src="img/jquery-1.5.2.min.js"></script>
<script src="http://www.google.com/jsapi?key= 这个key你需要自己去google申请 "></script>
<script type="text/javascript">
(function($){
//LocalSearch,用來搜索周邊並返回Json結構的結果,并傳遞值給方法$.Ptr()
//參數:ads參照點的地址,key搜索關鍵字
try{google.load('search','1')}catch(e){}
$.Srr = function(_o){
var _Ls;
try{google.setOnLoadCallback(_Load)}catch(e){}
function _Load(){
_Ls = new google.search.LocalSearch();
_Ls.setCenterPoint(_o.ads);
_Ls.setSearchCompleteCallback(this,_Comp,null);
_Ls.setResultSetSize(GSearch.LARGE_RESULTSET);//设置返回的最大记录(8条)
_Ls.execute(_o.key);
}
function _Comp(){
var meg = '[';
if(_Ls.results && _Ls.results.length>0){
for(var i=0;i<_Ls.results.length;i++){
var _Re=_Ls.results[i];
meg=meg+'{"tit":"'+_Re.title+'","url":"'+_Re.url+'","ads":"'+_Re.region+_Re.city+_Re.streetAddress+'"},';
}
}
meg =meg+']';$.Ptr(meg);
meg=null;
}
}
$.Ptr = function(meg){
alert(meg);
}
})(jQuery)
$(function(){
$.Srr({
'ads':'台灣桃園縣', //參照點的地址
'key':'學校' //要搜索的對象
});
});
</script>
</head>
<body style="font-family:Arial;font-size:12px;">
</body>
</html>