当前位置：文江博客话题详情

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

发布于 2021-11-16 08:42:03 字数 34 浏览 720 评论 3

Google 地图实现周边搜索如何实现？？？需要用到什么库之类的吗

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙与沫 2021-11-17 11:13:49

谢谢但是我是想实现手机端的不是网页端的

回复收藏 0

落墨 2021-11-17 10:41:23

我这里有一个类似的功能实现，希望对你有帮助，如下实现的是在地图上输入学校,进行搜索之后地图就可以自动把周围的学校给标记出来，这需要借助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>

回复收藏 0