«
教你在网页中添加微软地图(4)

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　缩放控制</p><p>　　缩放control提供了一个灵活的用户接口，用来控制地图的缩放。它还提供了可视化的回馈，用来提供地图可以缩放的量以及当前的比例信息。</p><p>　　首先我们需要增加一些样式表来描述control的样子，它主要包含4个部分：主体条，滑动杆，左边的缩小控制和右边的放大控制。每个部分都需要一个图片文件来定义如何显示这些控制部分。</p><p>　　在这里我创建了简单的图片，你也可以拷贝过去使用。缩放的样式定义应该和下面的类似：</p><p>　　<code>.VE_ZoomControl_minus<br />{<br />　position: absolute;<br />　width: 26px;<br />　height: 32px;<br />　background: url(images/ZoomOut.gif);<br />　display: inline;<br />　text-align: center;<br />　text-decoration: none;<br />　color: black;<br />}<br />.VE_ZoomControl_plus<br />{<br />　position: absolute;<br />　width: 26px;<br />　height: 32px;<br />　background: url(images/ZoomIn.gif);<br />　display: inline;<br />　text-align: center;<br />　text-decoration: none;<br />　color: black;<br />}<br />.VE_ZoomControl_bar<br />{<br />　position: absolute;<br />　width: 128px;<br />　height: 32px;<br />　background: url(images/ZoomBar.gif);<br />　display: inline;<br />}<br />.VE_ZoomControl_slider<br />{<br />　position: absolute;<br />　width: 8px;<br />　height: 24px;<br />　background: url(images/ZoomSlider.gif);<br />　overflow: hidden;<br />　display: inline;<br />}</code></p><p>　　这些创建缩放控制的代码可以被放到OnPageLoad函数的最后，以在调入页面的同时初始化这些control。</p>
<p> </p>

   <p>　　<code>var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");<br />document.body.appendChild(zm);</code></p><p>　　为了让缩放控制反映出当前的缩放尺度，我们需要在每次缩放发生的时候调节它。所以在onEndZoom函数的最后增加对control的刷新：</p><p>　　<code>map.onEndZoom=function(e)<br />{<br />　document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude + ’), Zoom=’ + e.zoomLevel; UpdateMapScale();<br />VE_ZoomControl.SetZoomLevel(map.GetZoomLevel());<br />}</code></p><p>　　下面我们看一看我们目前的页面是什么样子了，它已经增加了三个大的组件了，如下所示：</p><img src="/content/uploadfile/200805/2008053116574997.jpg" onclick="get_larger(this)" />　　添加便笺条<p>　　和其他control一样，我们首先需要定义便笺条的样式，我们使用和Virtual Earth网站一样的样式：</p><p>　　<code>.VE_Panel_el<br />{<br />　overflow: hidden;<br />　z-index: 31;<br />　border: 1px solid #cbcbcb;<br />　padding: 0;<br />　margin: 0;<br />　background: white;<br />}<br />.VE_Panel_title<br />{<br />　position: absolute;<br />　padding-top: 2px;<br />　padding-left: 5px;<br />　overflow: hidden;<br />　z-index: 32;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　font-weight: bold;<br />　color: rgb(230,250,255);<br />　text-transform: uppercase;<br />　cursor: default;<br />　white-space: nowrap;<br />　text-overflow: ellipsis;<br />}<br />.VE_Panel_title_blue{ background: #0030cc;}<br />.VE_Panel_cb<br />{<br />　padding-left: 1px;<br />　width: 18px; height: 18px;<br />　color: white;<br />　text-align: center;<br />　font-size: 7pt;<br />　font-family: Verdana;<br />　font-weight: bold;<br />　overflow: hidden;<br />　cursor: pointer;<br />}<br />.VE_Panel_cb_blue<br />{<br />　background: #001d7a;<br />　border: solid 2px #0030cc;<br />}<br />.VE_Panel_tb<br />{<br />　height: 18px;<br />　padding-top: 3px;<br />　padding-left: 2px;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　overflow: hidden;<br />}<br />.VE_Panel_tb_blue<br />{<br />　background: #ccd8ff;<br />}<br />.VE_Panel_tb td<br />{<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />}<br />.VE_Panel_tb a{ color: #000080;}<br />.VE_Panel_tb a: hover{ color: #ff9900;}<br />.VE_Panel_body<br />{<br />　padding: 5px;<br />　font-family: Verdana,sans-serif;<br />　font-size: 8pt;<br />　overflow: auto;<br />}</code></p>
 <p> </p>

   <p>　　在OnPageLoad函数最后我们创建并显示便笺条，我们需要定义其窗口戴孝，以使其做相应的显示。然后我们可以调用CreatePanel来显示：</p><p>　　<code>windowWidth=700;<br />windowHeight=500;<br />VE_Scratchpad.CreatePanel();<br />VE_Scratchpad.Show();</code></p><p>　　如果你用浏览器浏览页面，你将会看到便笺条看起来和Virtual Earth上的显示的基本一样，如下图：</p><img src="/content/uploadfile/200805/2008053116575157.jpg" onclick="get_larger(this)" /><p>　　我们可以对便笺条的一些属性进行设置，以改变其看起来的式样。首先可以增加一些欢迎信息或者介绍文字等等。下面的代码增加了一些介绍文字：</p><p>　　<code>VE_Scratchpad._introText="Your scratchpad is empty.";</code></p><p>　　我们也可以改变便笺条的菜单项，通过GetToolbar函数完成，如果我们提供自己的这个函数的版本那么就可以改变菜单。这个函数返回一个HTML字符串，其内容是便笺条上的菜单的显示内容。在如下的例子里我们有Clear和Email（和Virtual Earth相同），也有一个Add的菜单项。同样它必须在CreatePanel之前声明：</p><p>　　<code>VE_Scratchpad._GetToolbar=function()<br />{<br />　var html="＜table cellpadding=\"0\" cellspacing=\"0\" ";<br />　html+="border=\"0\" align=\"left\"＞";<br />　html+="＜tr＞＜td valign=\"top\" align=\"center\"＞";<br />　html+="＜a href=\"javascript:VE_Scratchpad.Clear();\" ";<br />　html+="oncontextmenu=\"return false;\"＞Clear Pad＜/a＞ | ";<br />　html+="＜a href=\"javascript:VE_Scratchpad.Email();\" ";<br />　html+="oncontextmenu=\"return false;\"＞Email this...＜/a＞ ";<br />　html+="＜/td＞＜/tr＞＜tr＞＜td＞ ＜/td＞＜/tr＞＜/table＞";<br />　return html;<br />}</code></p>
 <p> </p>

   <p>　　这两个菜单项将会调用VEScratchpad.Clear()和VEScratchpad.Email()函数。</p><p>　　下面我们修改VEScratchpad.Email函数：</p><p>　　<code>VE_Scratchpad.Email=<br />　function()<br />　{<br />　　var body="";<br />　　var urlprefix=GetUrlPrefix();<br />　　var first=true;<br />　　var ids="";<br />　　var e=VE_Scratchpad.entities;<br />　　if(e==null||e.length==0)<br />　　{<br />　　　alert("Nothing to send!");<br />　　　return;<br />　　}<br />　　var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);<br />　　for(var i=0;i＜lengthToSend;i++)<br />　　{<br />　　　var escapedID=escape(e[i].GetSerializedId());<br />　　　if(!escapedID) {continue;<br />　　}<br />　　body+=escape(e[i].name+"\n"+e[i].description+"\n\n");<br />　　if(!first) { ids+=","; }<br />　　ids+=escapedID;<br />　　first=false;<br />　}<br />　var allids=escape("Virtual Earth Scratch Pad from Dr. Neil\n" + urlprefix + "\n\n");<br />　window.open(’mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=’ + allids + body);<br />}</code></p><p>　　给便笺条增加一项</p><p>　　现在我们给Add函数增加相应的代码，以在便笺条上增加一项内容。首先我们使用地图中心来定位：</p><p>　　<code>VE_Scratchpad.Add=function()<br />{<br />　VE_Scratchpad.AddLocation( "Point", map.GetCenterLatitude(), map.GetCenterLongitude(), "my added point", "LOC");<br />}</code></p><p>　　这是我们用来提高其展示效果的方式，当然也可以修改其中的内容。</p><p>　　首先我们从Virtual Earth使用的样式表（CSS）中借用一点样式：</p></p><p>　　<code>.VE_Pushpin<br />{<br />　width: 23px; height: 17px;<br />　font-family: Arial,sans-serif;<br />　font-weight: bold;<br />　font-size: 8pt;<br />　color: White;<br />　overflow: hidden;<br />　cursor: pointer;<br />　text-decoration: none;<br />　text-align: center;<br />　padding-top: 1px;<br />}<br />.VE_Pushpin_blue<br />{<br />　background: url(http://virtualearth.msn.com/i/pins/blue.gif);<br />　z-index: 19;<br />}</code><p>　　在Virtual Earth站点上，每个便笺条边上就有一个X号来关闭它。在我们创建的便笺条中我们必须创建一个X号图案来代表它。便笺条代码里会寻找的图像是在URL里：＜your url＞/i/remove.gif。图像大小11×11象素。</p></p>