ASP. NET

Map-based search requires a map and the ability to search for locations. Fortunately, the Virtual Earth map control gives us both the necessary conditions. The most gratifying thing is that we only need to use HTML, JavaScript, and a little bit of CSS to build a map-based search system.

The vemap control not only displays our maps, but also provides four different search methods:

•	What/where controls available on local.live.com are also available in basic vemap controls. We can add a line of JavaScript code to enable this control.
•	The findlocation () method is used to perform location search. If a matching position is found, the map is automatically centered at the position and enlarged to the appropriate level.
•	The findnearby () method is used to perform a "what" search to find the enterprise located near the current map center. This search uses the same yellow page database as local.live.com.
•	The find () method allows you to control the search to the maximum extent. You can specify either the search content or the search range. You can also receive search results in the Javascript callback function.

By selecting the appropriate find method, you can build a fully functional map-based search application.

Before exploring various options for location search, let's take a look at the basic Virtual Earth map:

Program list1 Basic page (find.html)
If you load this page in a browser, you should see a map of America with a basic Virtual Earth navigation dashboard.
What/where control
You only need to enable the what/where control to use the search function. This is the simplest method. Add the following line of code to the end of the onpageload () method:
map.ShowFindControl();
Program list2. Enable the find control.
If you load the modified page in the browser, you should see the what/where control in the upper right corner:
Figure 1 What where control
If you type an address (such as Denver) in the "where" box and click "find", the map is automatically centered again. If the exact match cannot be found for Virtual Earth, you will see a pop-up dialog box for eliminating ambiguity:
Figure 2 remove ambiguity dialog box
By clicking the desired location, the map is centered again and scaled to the appropriate level:
Figure 3 Re-centered Map
If you enter information in the "what" text box, you will see a group of icons that match the search information in the Yellow Pages. For example, we can find coffee in "Vail, Colorado" (Ville, Colorado ):
Figure 4 what and where
Of course, the what/where control also has some defects. First, the control is quite wide. The map must be at least 635 pixels in width to display the entire control on the map. You can adjust the style by searching for related CSS entries. However, this function is neither easy to publish nor directly supported. Another problem is that the definition of search is quite inaccurate. That is to say, users can enter the address in any format, and virtual Earth will make the best inference. We can overcome these two limitations by creating our own search controls.
Back to Top
Findlocation Method
The findlocation () method is very simple and easy to use. You only need to input a string containing the address. In this example, we want to force the user to enter a zip code. Therefore, we will create a panel that contains a text box and a search button. In addition, we also need to link the search button to our findlocation method.
First, we need to add some HTML. Add the following Div to the HTML file body:
<div id="SearchPanel" >  <table border=0>  <tr><td bgcolor='#C0C0CF'><p align='center'>Search</p></td></tr>  <tr><td><p align='center'>    Zip Code:    <INPUT id="txtZip" type="text" value="" name="txtZip">  </td></tr>  <tr><td bgcolor='#E0E0E0'><p align='center'>    <input type="button" value="Search" onclick="DoFind();" id="Search" name="Search" />  </td></tr>  <table></div>
Program list3. Add a panel
Next, we need to add some style information to make our search controls look better. Add the following script blocks to the header of the page:
<style type="text/css" media="screen">  #SearchPanel  {    width: 150px;    border-style: solid;    border-width: 1px;    border-color: lightgray;    background: white;  }</style>
Program list4. Search box style design
Next, we need to attach the search panel to the map and position it in the desired position. Use the following code to replace your onpageload () method:
function OnPageLoad(){  map = new VEMap('myMap');  map.LoadMap();  var search = document.getElementById('SearchPanel');  map.AddControl(search);  search.style.left = "475px";  search.style.top = "5px";}
Program list5 additional search panel
Finally, we need to build the dofind () method. Add the following code to the script block:
function DoFind(){  map.FindLocation(document.getElementById('txtZip').value);}
Program list6. Implement findlocation
If we load our application now, we should see our custom search box in the upper right corner. Enter your desired zip code and click the search button to see what will happen:
Figure 5 findlocation in work
You can add Verification Code to ensure that the user enters a valid zip code, but I will leave it as an exercise for the reader.
Back to Top
Findnearby Method
The next task in our list is to implement our own "what" search. To implement "what", we need to replace the HTML in our search panel:
<div id="SearchPanel" >  <table border=0>  <tr><td bgcolor='#C0C0CF'><p align='center'>Search</p></td></tr>  <tr><td><p align='center'>      Business:      <INPUT id="txtBiz" type="text" value="" name="txtBiz">  </td></tr>  <tr><td bgcolor='#E0E0E0'><p align='center'>    <input type="button" value="Search" onclick="DoFind();" id="Search" name="Search" />  </td></tr>  <table></div>
Program list7 What text box
We also need to change the dofind () method:
function DoFind(){  map.FindNearby(document.getElementById('txtBiz').value);}
Program list8. Use findnearby
Note that the findnearby () method looks almost the same as the findlocation () method.
If you load our page in your browser, you can perform a "what" search to find an enterprise:
Figure 6 findnearby Method
You may need to enlarge the area of interest before running the search. The default map view displays the entire US territory and searches near the map center.
Back to Top
All functions of find
The last selection of search execution allows you to control the search process and results to the maximum extent at the same time. First, we only need to merge findlocation and findnearby searches into a single search method.
Step 1: add the "business" and "Zip" text boxes to HTML:
<div id="SearchPanel" >  <table border=0>  <tr><td bgcolor='#C0C0CF'><p align='center'>Search</p></td></tr>  <tr><td><p align='center'>    Zip Code:    <INPUT id="txtZip" type="text" value="" name="txtZip">  </td></tr>  <tr><td><p align='center'>      Business:      <INPUT id="txtBiz" type="text" value="" name="txtBiz">  </td></tr>  <tr><td bgcolor='#E0E0E0'><p align='center'>    <input type="button" value="Search" onclick="DoFind();" id="Search" name="Search" />  </td></tr>  <table></div>
Program list9. Complete search panel
Next, we need to replace our dofind () method again:
function DoFind(){  var where = document.getElementById('txtZip').value;  var what = document.getElementById('txtBiz').value;  map.Find(what, where, 1);}
Program list10 find methods containing what and where
Now, if we load our webpage, we should see the text boxes "what" and "where.
Figure 7 search using find
At this point, our application is exactly the same as the initial version using the built-in what/where control.
Back to Top
Processing result
We may not want to automatically display the results, but want to perform another filtering or processing. You may even want to display the results in a new panel. Fortunately, the find () method is different from other methods we have chosen. It allows us to define a javascript callback function. This callback method will be activated after the search is complete, so that we can access the results.
Depending on the specific method of calling find (), we may receive two different types of results:

 

 
  
 
   
 
    
•
 
    
If the find method returns "where", we will receive a vesearchresult object. Each object contains an id value and a pair of latitude/longitude.
 
   
 
   
 
    
•
 
    
If the find method returns "what", we will receive a vefindresult object. Each object contains several attributes, including name, description, phone, and a pair of latitude/longitude.
 
   
 
  

 
We cannot determine which type of result will be returned, so we need to differentiate the result type. Vesearchresult always has a non-empty Id field, while vefindresult always has a non-empty name field.
Back to Top
Create result View
We want to display the results in the table on the far right of the map. You need to add HTML and CSS to define the table. First, add the following <div> tag to the page body:
<div id="SearchResults" ></div>
Program list11 searchresults Div
Next, add some CSS to define the div. Add the following new style to the style section:
#SearchResults{  display: none;  width: 325px;  border-style: solid;  border-width: 1px;  border-color: lightgray;  background: white;}
Program list12. CSS of search results
Finally, we want to append the DIV as a control to our map object. Let's return to the onpageload () function and add some new code at the end of the function:
var results = document.getElementById('SearchResults');map.AddControl(results);results.style.left = "640px";results.style.top = "5px";map.ShowDisambiguationDialog(false);
Program list13. Create a search result View
Please note that, like using the what/where panel, we must set the position after adding the control to the map. Similarly, we disable the automatic exclusion feature. If the last row is omitted, our results cannot be used, because after the callback is executed, the user is forced to determine a location. If the exclusion ambiguity is disabled, the map is notified to automatically select the first position returned.
Back to Top
Modify the dofind Method
Next, we must add an additional parameter to the find () call. This additional parameter is used to identify the Javascript callback method:
function DoFind(){  var where = document.getElementById('txtZip').value;  var what = document.getElementById('txtBiz').value;  map.Find(what, where, 1, ProcessResults);}
Program list14 dofind
Back to Top
Processresults Method
Finally, we need to establish our processresults () method. Create a table and place it in searchresults <div>.
Function processresults (findresults) {var Results = "<Table> <tr> <TD colspan = 3 align = 'center'> Find results </TD> </tr> "; results + = "<tr> <TD> name </TD> <TD> description </TD> <TD style = 'width: 100px; '> phone </TD> </tr> "; var numresults = 5; numresults = math. min (numresults, findresults. length); For (r = 0; r <numresults; r ++) {Results + = "<tr> <TD>"; if (findresults [R]. name! = NULL) // vefindresult object {Results + = findresults [R]. name + "</TD> <TD>"; Results + = findresults [R]. description + "</TD> <TD style = 'width: 100px; '>"; Results + = findresults [R]. phone;} else {Results + = "unknown </TD> <TD> N/A";} results + = "</TD> </tr> ";} results + = "</table>"; var resultpane = document. getelementbyid ('searchresults'); resultpane. style. display = 'block'; resultpane. innerhtml = results ;}
Program list15 processresults Method
If we load our page now, we should be able to enter the zip code and enterprise and see the result:
Figure 8 final view
Although our basic applications can work normally, we can always add more features. For example, you can add verification to ensure that users can only enter the zip code. We can also display more or fewer results for our tables, and even allow users to flip pages to the next set of results.
Back to Top
Conclusion
Multiple search options built into the vemap control provide you with great flexibility in designing map-based search. Whether you want to perform a simple search or perform complex control over user input, you only need to use JavaScript, CSS, HTML, and virtual Earth sdks.
The author of this article is Robert McGovern MVP (Virtual Earth/mappoint) from infusion development ).
 
 
Original address: http://www.microsoft.com/china/MSDN/library/Windev/windowslive/bb259692.mspx? MFR = true
Trackback: http://tb.blog.csdn.net/TrackBack.aspx? Postid = 1560744