网络无垠 技术无界 知识无价 生命无悔
贴心代码 >> html/js/css

Google 地图实现周边搜索 如何实现???

tag: Google 地图


http://www.oschina.net/question/246578_45471
Google 地图实现周边搜索 如何实现???


我这里有一个类似的功能实现,希望对你有帮助,如下实现的是在地图上输入学校,进行搜索之后地图就可以自动把周围的学校给标记出来,这需要借助google的多个API才能实现,首先是map其次分别是localsearch和ajax.另外如果你要使用这个搜索功能,就必须要申请一个key,申请地址是:http://code.google.com/intl/zh-TW/apis/maps/signup.html
接下来我就直接发代码了.

[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]



发布: 2017-10-9 8:26:47@61.145.169.200 来源: 本站:peace