添加查找功能
为了进行地图查找，我们必须使用Virtual Earth查找管理器（Search Manager）。这里比较不好的一点是必须访问你网站外部的文件，而这样会导致一个对用户的安全警告信息。
重要提示：它只能在浏览器允许跨站点数据访问的时候使用。缺省情况下浏览器不允许这样作。
在Internet Explorer里你可以这样修改，以允许跨站点数据访问：
1. 在工具菜单里选择Internet选项
2. 选择安全tab
3. 点击自定义级别按钮
4. 在列表里选择其他这个数型列表
5. 允许"跨域浏览数据"
在HTML文件的body段的最后增加一个按钮和输入框来允许用户输入地点并点击按钮进行查找：
＜input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/＞＜input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/＞
在代码段中增加一个查找函数DoFind：
function DoFind(){
var where = document.getElementById("WhereText").value;
VE_SearchManager._ResetPaging();
VE_SearchManager._CancelAllRequests();
VE_SearchManager.searchPage="http://virtualearth.msn.com/search.aspx";
VE_SearchManager._DoSearch(where, where);}
页面将会进行查找并将查找结果位置显示在地图中央。同时我们也可以将查找的地点增加到便笺条上。我们需要对代码进行处理，使得在查找完成后可以做相应的工作。
新的Dofind方法将会做更多的工作，和VE_SEarchManger._DoSearch函数类似：
function DoFind(){
var where = document.getElementById("WhereText").value;
var a="";
var b=escape(where);
var c=map.GetLatitude(0);
var d=map.GetLongitude(windowWidth);
var e=map.GetLatitude(windowHeight);
var f=map.GetLongitude(0);
var g="";
var i="";
var r=0;
var
url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;
if(!VE_SearchManager.xmlHttp)
{
VE_SearchManager.xmlHttp=GetXmlHttp();
}
var xmlHttp=VE_SearchManager.xmlHttp;
if(xmlHttp)
{
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=FindResponseHandler;
VE_SearchManager.searching=true;
xmlHttp.send("");
}}FindResponseHandler=function(){
var x = VE_SearchManager.xmlHttp;
if(x.readyState==4)
{
VE_SearchManager.searching = false;
var code = x.responseText;
try
{
eval(code);
}
catch(ex){}
VE_Scratchpad.AddLocation(
document.getElementById("WhereText").value,
map.GetCenterLatitude(),
map.GetCenterLongitude(),"", "LOC");
}}
缩放控制
缩放control提供了一个灵活的用户接口，用来控制地图的缩放。它还提供了可视化的回馈，用来提供地图可以缩放的量以及当前的比例信息。
首先我们需要增加一些样式表来描述control的样子，它主要包含4个部分：主体条，滑动杆，左边的缩小控制和右边的放大控制。每个部分都需要一个图片文件来定义如何显示这些控制部分。
在这里我创建了简单的图片，你也可以拷贝过去使用。缩放的样式定义应该和下面的类似：
.VE_ZoomControl_minus{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomOut.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;}.VE_ZoomControl_plus{
position: absolute;
width: 26px;
height: 32px;
background: url(images/ZoomIn.gif);
display: inline;
text-align: center;
text-decoration: none;
color: black;}.VE_ZoomControl_bar{
position: absolute;
width: 128px;
height: 32px;
background: url(images/ZoomBar.gif);
display: inline;}.VE_ZoomControl_slider{
position: absolute;
width: 8px;
height: 24px;
background: url(images/ZoomSlider.gif);
overflow: hidden;
display: inline;}
这些创建缩放控制的代码可以被放到OnPageLoad函数的最后，以在调入页面的同时初始化这些control。
var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");document.body.appendChild(zm);
为了让缩放控制反映出当前的缩放尺度，我们需要在每次缩放发生的时候调节它。所以在onEndZoom函数的最后增加对control的刷新：
map.onEndZoom=function(e){
document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude + ’), Zoom=’ + e.zoomLevel; UpdateMapScale();VE_ZoomControl.SetZoomLevel(map.GetZoomLevel());}
下面我们看一看我们目前的页面是什么样子了，它已经增加了三个大的组件了，如下所示：
添加便笺条
和其他control一样，我们首先需要定义便笺条的样式，我们使用和Virtual Earth网站一样的样式：
.VE_Panel_el{
overflow: hidden;
z-index: 31;
border: 1px solid #cbcbcb;
padding: 0;
margin: 0;
background: white;}.VE_Panel_title{
position: absolute;
padding-top: 2px;
padding-left: 5px;
overflow: hidden;
z-index: 32;
font-family: Verdana,sans-serif;
font-size: 8pt;
font-weight: bold;
color: rgb(230,250,255);
text-transform: uppercase;
cursor: default;
white-space: nowrap;
text-overflow: ellipsis;}.VE_Panel_title_blue{ background: #0030cc;}.VE_Panel_cb{
padding-left: 1px;
width: 18px; height: 18px;
color: white;
text-align: center;
font-size: 7pt;
font-family: Verdana;
font-weight: bold;
overflow: hidden;
cursor: pointer;}.VE_Panel_cb_blue{
background: #001d7a;
border: solid 2px #0030cc;}.VE_Panel_tb{
height: 18px;
padding-top: 3px;
padding-left: 2px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: hidden;}.VE_Panel_tb_blue{
background: #ccd8ff;}.VE_Panel_tb td{
font-family: Verdana,sans-serif;
font-size: 8pt;}.VE_Panel_tb a{ color: #000080;}.VE_Panel_tb a: hover{ color: #ff9900;}.VE_Panel_body{
padding: 5px;
font-family: Verdana,sans-serif;
font-size: 8pt;
overflow: auto;}
在OnPageLoad函数最后我们创建并显示便笺条，我们需要定义其窗口戴孝，以使其做相应的显示。然后我们可以调用CreatePanel来显示：
windowWidth=700;windowHeight=500;VE_Scratchpad.CreatePanel();VE_Scratchpad.Show();
如果你用浏览器浏览页面，你将会看到便笺条看起来和Virtual Earth上的显示的基本一样，如下图：
我们可以对便笺条的一些属性进行设置，以改变其看起来的式样。首先可以增加一些欢迎信息或者介绍文字等等。下面的代码增加了一些介绍文字：
VE_Scratchpad._introText="Your scratchpad is empty.";
我们也可以改变便笺条的菜单项，通过GetToolbar函数完成，如果我们提供自己的这个函数的版本那么就可以改变菜单。这个函数返回一个HTML字符串，其内容是便笺条上的菜单的显示内容。在如下的例子里我们有Clear和Email（和Virtual Earth相同），也有一个Add的菜单项。同样它必须在CreatePanel之前声明：
VE_Scratchpad._GetToolbar=function(){
var html="＜table cellpadding="0" cellspacing="0" ";
html+="border="0" align="left"＞";
html+="＜tr＞＜td valign="top" align="center"＞";
html+="＜a href="javascript:VE_Scratchpad.Clear();" ";
html+="oncontextmenu="return false;"＞Clear Pad＜/a＞ | ";
html+="＜a href="javascript:VE_Scratchpad.Email();" ";
html+="oncontextmenu="return false;"＞Email this...＜/a＞ ";
html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";
return html;}
这两个菜单项将会调用VEScratchpad.Clear()和VEScratchpad.Email()函数。
下面我们修改VEScratchpad.Email函数：
VE_Scratchpad.Email=
function()
{
var body="";
var urlprefix=GetUrlPrefix();
var first=true;
var ids="";
var e=VE_Scratchpad.entities;
if(e==null||e.length==0)
{
alert("Nothing to send!");
return;
}
var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
for(var i=0;i＜lengthToSend;i++)
{
var escapedID=escape(e[i].GetSerializedId());
if(!escapedID) {continue;
}
body+=escape(e[i].name+"
"+e[i].description+"
");
if(!first) { ids+=","; }
ids+=escapedID;
first=false;
}
var allids=escape("Virtual Earth Scratch Pad from Dr. Neil
" + urlprefix + "
");
window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);}
给便笺条增加一项
现在我们给Add函数增加相应的代码，以在便笺条上增加一项内容。首先我们使用地图中心来定位：
VE_Scratchpad.Add=function(){
VE_Scratchpad.AddLocation( "Point", map.GetCenterLatitude(), map.GetCenterLongitude(), "my added point", "LOC");}
这是我们用来提高其展示效果的方式，当然也可以修改其中的内容。
首先我们从Virtual Earth使用的样式表（CSS）中借用一点样式：
.VE_Pushpin{
width: 23px; height: 17px;
font-family: Arial,sans-serif;
font-weight: bold;
font-size: 8pt;
color: White;
overflow: hidden;
cursor: pointer;
text-decoration: none;
text-align: center;
padding-top: 1px;}.VE_Pushpin_blue{
background: url(http://virtualearth.msn.com/i/pins/blue.gif);
z-index: 19;}
在Virtual Earth站点上，每个便笺条边上就有一个X号来关闭它。在我们创建的便笺条中我们必须创建一个X号图案来代表它。便笺条代码里会寻找的图像是在URL里：＜your url＞/i/remove.gif。图像大小11×11象素。
