GIS (five)--complete JS version of Sogou map Basic Interactive search function

Recently doing in Beijing Haidian Smart Tourism project, since it is a tourism project, then involved in the operation of the map is the inevitable thing. The previous articles were mainly about sharing techniques for marking multiple attractions and their attractions on a map. In fact, there are some different from the project. The project requires real-time display of information on attractions, updated marker colors (green, orange, red), and real-time updates on the sights (visitor traffic, comfort) on the Attractions brand, based on real-time data. None of this appears in the article, and the article is only validated from a technical standpoint.

The main thing to do today is a basic function on the map--interactive search.

In fact, the official web search is not a lot of examples, and really not very drop. But as a reference, it is still possible. Click here for the "Scope query-specify Category ID, keyword" code example. If you don't have the features you want, go to the official API documentation and click here to see the search class API.

First put out my search also code, very simple, an input box, a search button:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">since it is a map, there is no code to initialize the map:
var map;//map var markers;//array: result tag var srender;//search Render object//Initialize function Initialize () {  var mylatlng = new Sogou.maps.Point (12939000,4840250);  var myoptions = {    zoom:10,    center:mylatlng,    mapcontroltype:5  };  Map = new Sogou.maps.Map (document.getElementById ("map"), myoptions);//Create Maps  srender=new Sogou.maps.SearchRenderer ();//Create a search render object}
since it's a search, there must be a way to search:
Search function Search_center () {  var kw = $ (". Kw"). Val ();  Search (null,kw);} xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx//The following content is based on the specified content, search positioning// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx//search location (such as hotel) function search (classid,kw) {  Clearmarker (Srender);//clear the location tag  var request={     ' map ': map,     ' what ': {},     ' range ': {' city ': ' Beijing '}  ;  if (ClassID) Request.what.classid=classid;  if (kw) request.what.keyword=kw+ ",";  var search=new sogou.maps.Search ();//Create Search Instance  srender=new sogou.maps.SearchRenderer ();//({' Panel ': document.getElementById (' result ')});//Create a search render object  search.search (request,callback);//Perform a search  Search.setrenderer (Srender);//Render search results}
each time you search, you need to clean up your original search history:
Clear Mark function Clearmarker (srender) {  $ ("#result"). Children (). remove ();//Clear Query list  Srender.clearresultfeatures ();  var m=srender.getmarkers ();  if (m) {    ///dynamically changes the value of the array, so must be inverted operation for    (var i=m.length-1;m && i>=0;i--) {        m[i].setmap (null);        M.pop ();//Eject Last Object}}}  
each time the search is complete, reposition the center point, I'm here to get the first search result, as the new center point:
After the search is complete, reset the center point function Callback (result) {setTimeout (getmarkers,500);} Gets the central node function getmarkers () {  markers = Srender.getmarkers ();  if (markers && markers.length>0) {    center = markers[0].options.feature.points[0];    Tocenter ();//Reposition Map Center Point  }}//Locate Center function Tocenter () {  map.setcenter (center)}
JS on so much, it is worth noting that this string of JS, are to be put in </body> behind. Take a look at it first:

(click here to view on the website)to put it simply,
 
 

  
  
 
   
Initialized JS, where map initialization naturally needless to say, but more than a Srender object, which is a search render class object, is to render the search results on the map. Interested can look at the official API documentation;
 
   
The search for JS, is mainly called the search object of the search method. Please refer to the API documentation for the settings of the search parameters.
 
   
The clean JS, originally called Only the Clearresultfeatures () method of the Srender object, found that the marker on the map disappeared after execution, but if Srender.getmarkers () was executed, the marker object was found, It just doesn't show up on the map. But it still occupies the resources. So I just cleared the marker from the Srender object.
 
   
The last one is to reset the center point of JS, although the map will automatically set a new center point, but we also do a perimeter search, we must first match the most qualified results as the center of the region search, so this here first to make it out.
 
  
 
 
If you want to display the search results as a list, simply modify the creation of the Srender object:
Srender=new sogou.maps.SearchRenderer ({' Panel ':d ocument.getelementbyid (' result ')});
This result is the ID of the previous div on the page. This will automatically put the results into this div. The search function is basically complete. Next, do the functions of the surrounding search. Finally beautify a version of the basic idea is this look, we have a lot of advice. 
GIS (five)--complete JS version of Sogou map Basic Interactive search function