您當(dāng)前位置：首頁 > 互聯(lián)網(wǎng) > GIS（六）――實(shí)現(xiàn)js版搜狗地圖周邊搜索功能

GIS（六）――實(shí)現(xiàn)js版搜狗地圖周邊搜索功能

來源：程序員人生發(fā)布時(shí)間：2014-10-06 08:00:01 閱讀次數(shù)：3434次

在上一篇文章《GIS（五）――完成js版搜狗地圖基本交互搜索功能》中，介紹了搜狗地圖的關(guān)鍵字搜索功能，今天就實(shí)現(xiàn)以下另一個(gè)重要功能吧――那就是周邊搜索功能。

按照慣例，還是把官網(wǎng)上的示例代碼給大家貼出來。飛機(jī)票在此。周邊搜索的功能，跟關(guān)鍵字搜索其實(shí)是一樣的，也是主要用到的了SearchRequest這個(gè)類，點(diǎn)擊這里查看api文檔。SearchRequest 對(duì)象規(guī)范：

屬性	類型	說明
`map`	`Map`	進(jìn)行搜索的地圖實(shí)例
`renderer`	`SearchRenderer`	將結(jié)果進(jìn)行渲染的對(duì)象。也可以通過setRenderer方法設(shè)置
`range`	`object`	必選。表示查詢范圍。范圍有多個(gè)屬性，用于不同范圍的查詢`{ city:城市<String>, boundFlag:0\|2(0代表視野所在的城市內(nèi)搜索; 2代表視野內(nèi)搜索)<Number>, center:以中心點(diǎn)查詢<LatLng \|Point>, radius:以中心點(diǎn)進(jìn)行查詢時(shí)指定半徑<Number>,limit:0\|1(指定半徑時(shí)有效，代表是否嚴(yán)格限制半徑。0代表不限制，1代表限制)<Number> }`
`what`	`object`	必選。表示要查詢的內(nèi)容。有三個(gè)屬性`{ keyword:關(guān)鍵字<String>, classid:分類id<String>, id:uid或者dataid<String> }`, 分類id:普通數(shù)字代表小類id，前綴加C_的代表大類id。查詢時(shí)關(guān)鍵字與分類id 可以聯(lián)合查詢。id 只能單獨(dú)查詢，如果存在id屬性，就只按id查詢。【查看所有分類id】
`clientid`	`String`	可選。為用戶提供更穩(wěn)定的服務(wù)。【查看詳情】

從api文檔中也可以看到，range這個(gè)參數(shù)是用來限定搜索范圍的，而what制定查詢內(nèi)容的。所以只要我們想查什么，就要去找它的分類id，然后再進(jìn)行檢索。

好了，要了解的也就這么多，接下來就是代碼實(shí)現(xiàn)部分了。

在原先的代碼，添加一個(gè)對(duì)象，用來將結(jié)果渲染到右側(cè)列表中：

var sRender_area;//搜索周邊渲染對(duì)象

在initialize方法中，添加創(chuàng)建周邊搜索的渲染對(duì)象：

function initialize(){ //.... sRender=new sogou.maps.SearchRenderer();//創(chuàng)建搜索渲染對(duì)象 sRender_area=new sogou.maps.SearchRenderer();//創(chuàng)建周邊搜索渲染對(duì)象 }

添加一個(gè)搜索周邊的方法：

//搜索周邊 function search_area(classid){ clearMarker(sRender_area);//清除定位標(biāo)記 clearMarker(sRender); var request={ 'map':map, 'what':{ 'classid':classid }, 'range':{ 'city':'北京', 'center':new sogou.maps.Point(center.x,center.y), 'radius':1000, 'limit':1 //嚴(yán)格限制半徑 } }; var search=new sogou.maps.Search();//創(chuàng)建搜索實(shí)例 search.search(request); sRender_area=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')}); search.setRenderer(sRender_area); }

js都修改完了，添加上搜索周邊的按鈕：

<input type="button" onclick="search_area('1228,1403,1330,1332')" value="周邊餐飲" /> <input type="button" onclick="search_area('97,1264,1262')" value="周邊公交" /> <input type="button" onclick="search_area('83,1321,1259')" value="周邊商場(chǎng)" /> <input type="button" onclick="search_area('C_32')" value="周邊酒店" /> <input type="button" onclick="search_area('1261')" value="周邊醫(yī)院" />

效果圖如下：

點(diǎn)擊這里到網(wǎng)站上查看

周邊搜索和關(guān)鍵字搜索都是同一個(gè)，只不過設(shè)定的參數(shù)不一致。而且我可以同時(shí)設(shè)定關(guān)鍵字和周邊搜索，進(jìn)行范圍更小更精確的搜索。只是用的話，其實(shí)沒什么太大的難度，只要按照官方的api文檔和示例代碼就可以了解怎么開發(fā)了。

上面提到的都是從技術(shù)的角度來驗(yàn)證問題，如果真正使用的時(shí)候，最起碼還是要提供智能提示的功能。界面也不能這么簡(jiǎn)陋，下一篇文章，我將解決這2個(gè)問題。敬請(qǐng)期待吧。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 給想跨專業(yè)考研的同學(xué)：確定考研目標(biāo)，立足自我進(jìn)行安排

下一篇 Light OJ 1236 Race 第二類斯特林?jǐn)?shù)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

GIS（六）――實(shí)現(xiàn)js版搜狗地圖周邊搜索功能