<p> 变换地图样式</p><p> 上面我们已经介绍了有三种样式可以选择：</p><p> ・a-aerial：显示高空的卫星图像。</p><p> ・r-road：显示地区的街道地图；</p><p> ・h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。</p><p> 当map control显示的时候，可以通过SetMapStyle函数来变换地图样式：</p><p> <code>SetMapStyle(mapStyle)</code></p><p> 函数通过mapStyle参数来设置式样，如上文所述，使用a，r或者h。</p><p> 我们可以通过增加两个checkbox来允许用户改变地图样式：</p><p> <code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<br />＜script src="MapControl.js"＞＜/script＞<br />＜script＞<br />var map = null;<br />function OnPageLoad()<br />{<br /> map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);<br /> document.body.appendChild(map.element);<br /> var updateInfo = function(e)<br /> {<br /> document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude +<br /> ’, Zoom=’ + e.zoomLevel;<br /> }<br /> map.onEndContinuousPan = updateInfo;<br /> map.onEndZoom = updateInfo;<br />}<br />function ChangeMapStyle()<br />{<br /> var Aerial = document.getElementById("AerialStyleCheck");<br /> var Vector = document.getElementById("VectorStyleCheck");<br /> var s = ’r’;<br /> if (Aerial.checked && Vector.checked)<br /> {<br /> s = ’h’;<br /> }<br /> else if (Aerial.checked)<br /> {<br /> s = ’a’;<br /> }<br /> map.SetMapStyle(s);<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞<br />＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞<br />Street Style<br />＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞<br />Aerial Style<br />＜/div＞<br />＜/body＞<br />＜/html＞</code></p>
<p> </p>
<p> 效果如下：</p><img src="/content/uploadfile/200805/2008053116574143.gif" onclick="get_larger(this)" /> 给地图增加图钉(pin)标记<p> 增加图钉标记的功能允许我们在map control上指出特殊位置。图钉在map control上显示覆盖的信息。AddPushpin方法的原型如下：</p><p> <code>AddPushpin(id,lat,lon,width,height,className,innerHtml)</code></p><p> id：图钉的标识符。在map control上每个图钉都具有唯一的标识号。</p><p> lat：放置图钉的地点的纬度。</p><p> lon：放置图钉的地点的经度。</p><p> width：图钉的宽度。</p><p> height：图钉的高度。</p><p> width和height使用来计算图钉的偏移，使得图钉可以放置到指定的经纬度。</p><p> 提示：如果你希望使得图钉的底部右脚处于指定的经纬度，你需要将这些值乘2：</p><p> Classname：图钉的样式类型(style class)的名称。如果没有这个参数图钉不会显示。样式可以通过CSS文件描述或者通过嵌入式的代码描述。</p><p> innerHTML：显示在图钉上的文字。</p><p> 下面的例子中，使用onMouseClick事件，当用户点击的时候给点击处增加一个图钉：</p><p> <code>＜html＞<br />＜head＞<br />＜title＞My Virtual Earth＜/title＞<br />＜style type="text/css" media=screen＞<br />＜!--<br />.pin<br />{<br /> width:44px;height:17px;<br /> font-family:Arial,sans-serif;<br /> font-weight:bold;font-size:8pt;<br /> color:White;overflow:hidden;<br /> cursor:pointer;text-decoration:none;<br /> text-align:center;background:#0000FF;<br /> border:1px solid #FF0000;<br /> z-index:5;<br />}<br />--＞<br />＜/style＞<br />＜script src="MapControl.js"＞＜/script＞<br />＜script＞<br />var map = null;<br />function OnPageLoad()<br />{<br /> map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);<br /> document.body.appendChild(map.element);<br /> var updateInfo = function(e)<br /> {<br /> document.getElementById("info").innerHTML = ’Latitude = ’ + e.latitude + ’, Longitude = ’ + e.longitude +<br /> ’, Zoom=’ + e.zoomLevel;<br /> }<br /> map.onEndContinuousPan = updateInfo;<br /> map.onEndZoom = updateInfo;<br /> map.onMouseClick = function(e)<br /> {<br /> map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);<br /> }<br />}<br />function ChangeMapStyle()<br />{<br /> var Aerial = document.getElementById("AerialStyleCheck");<br /> var Vector = document.getElementById("VectorStyleCheck");<br /> var s = ’r’;<br /> if (Aerial.checked && Vector.checked)<br /> {<br /> s = ’h’;<br /> }<br /> else if (Aerial.checked)<br /> {<br /> s = ’a’;<br /> }<br /> map.SetMapStyle(s);<br />}<br />＜/script＞<br />＜/head＞<br />＜body onLoad="OnPageLoad()"＞<br />＜div id="info" style="font-size:10pt"＞<br />＜/div＞<br />＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞<br />＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞<br />Street Style<br />＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞<br />Aerial Style<br />＜/div＞<br />＜/body＞<br />＜/html＞</code></p></p><p> 这样会导致一些问题：</p><p> ・每次地图被拖动时，另外一个图钉被增加。</p><p> ・双击地图进行放大的功能无法完成，因为每次接收到双击事件，图钉首先会被增加。</p><p> ・单个标识符可以增加多个图钉。</p><p> 一个解决方案是对onMouseClick事件进行特殊处理，我们可以每次增加一个图钉的时候移除以前的图钉。</p><p> 使用RemovePushpin函数移去一个图钉：</p><p> <code>RemovePushpin(id);</code></p><p> 这个函数通过传入的id标识符来去除某个图钉。</p><p> 去除一个图钉也会同时移去所有相同标识符的图钉。</p><p> 上文中的代码可以修改以移去以前所有的图钉：</p><p> <code>map.onMouseClick = function(e){<br /> map.RemovePushpin(’pin’);<br /> map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);<br />}</code></p><p> 这样就只有一个图钉来标明上次点击的位置：</p><img src="/content/uploadfile/200805/2008053116574339.gif" onclick="get_larger(this)" /></p>