GIS (vi)--to achieve the JS version of Sogou map around the search function

In the previous article "GIS (five)-complete JS version of Sogou map Basic Interactive search function", introduced sogou map keyword search function, today to achieve another important function of it-that is the surrounding search function.

In accordance with the Convention, the official online sample code is posted to everyone. The plane ticket is here. Peripheral search function, and keyword search is actually the same, is the main use of the SearchRequest this class, click here to view the API documentation. SearchRequest Object Specification:

by using the Setrenderer method

property	type	description
map	map	Map instance to search for
renderer	searchrenderer	The object that renders the result. You can also set the
range	object	Must be selected. Represents a query scope. Range has multiple properties for different ranges of queries{ city:城市<String>, boundFlag:0|2(0代表视野所在的城市内搜索; 2代表视野内搜索)<Number>, center:以中心点查询<LatLng |Point>, radius:以中心点进行查询时指定半径<Number>,limit:0|1(指定半径时有效，代表是否严格限制半径。0代表不限制，1代表限制)<Number> }
what	object	Must be selected. Represents the content to query. There are three attributes { keyword:关键字<String>, classid:分类id<String>, id:uid或者dataid<String> } , category ID: The ordinary number represents the small class ID, the prefix plus C_ represents the large class ID. Query-time keywords and category IDs can be federated. The ID can only be queried separately, and if there is an id attribute, it is queried by ID only. "View all category IDs"
clientid	String	Optional. To provide users with more stable service. "View Details"

As you can see from the API documentation, the range parameter is used to define the search scope, and what defines the query. So as long as we want to check what, we need to find its classification ID, and then search.

Well, that's all there is to know, and then there's the Code implementation section.

In the original code, add an object to render the result to the right-hand list:

var srender_area;//search surrounding Render objects

In the Initialize method, add a render object that creates a perimeter search:

function Initialize () {  //....  Srender=new sogou.maps.SearchRenderer ();//Create a search render object  srender_area=new sogou.maps.SearchRenderer ();//Create a perimeter search render object }

Add a method for searching the perimeter:

Search for peripheral function Search_area (classid) {  clearmarker (Srender_area);//clear the location tag  clearmarker (srender);  var request={         ' map ': map,         ' what ': {              ' classid ': ClassID         },         ' range ': {              ' city ': ' Beijing ',              ' Center ': New Sogou.maps.Point (CENTER.X,CENTER.Y),              ' radius ': +,              ' limit ': 1//Strict limit radius         }    };  var search=new sogou.maps.Search ();//Create a search instance  search.search (request);  Srender_area=new sogou.maps.SearchRenderer ({' Panel ':d ocument.getelementbyid (' result ')});  Search.setrenderer (Srender_area);}

JS are modified, add the search around the button:

  <!--search around  --<input type= "button" onclick= "Search_area (' 1228,1403,1330,1332 ')" value= "nearby Dining"/>  <input type= "button" onclick= "Search_area (' 97,1264,1262 ')" value= "Perimeter bus"/>  <input type= "button" onclick = "Search_area (' 83,1321,1259 ')" value= "Perimeter Mall"/>  <input type= "button" onclick= "Search_area (' c_32 ')" value= " Nearby hotels "/>  <input type=" button "onclick=" Search_area (' 1261 ') "value=" Peripheral Hospital/>

As follows:

Click here to view on the website

The surrounding search and keyword search are the same, but the parameters set are inconsistent. And I can set up keywords and perimeter searches at the same time, making a smaller and more accurate search. just use, in fact, there is not much difficulty, as long as the official API documentation and sample code to understand how to develop.

The above mentioned are from the technical point of view to verify the problem, if the real use, at the very least, to provide the function of smart hints. Interface can not be so humble, next article, I will solve these 2 problems. Please look forward to it.

       

GIS (vi)--to achieve the JS version of Sogou map around the search function