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

核心提示： function DoPanUp(){map.ContinuousPan(0, -10, 20);}function DoPanDown(){map.ContinuousPan(0, 10, 20);}function DoPanLeft(){map.ContinuousPan(-10,

function DoPanUp()
{
　map.ContinuousPan(0, -10, 20);
}
function DoPanDown()
{
　map.ContinuousPan(0, 10, 20);
}
function DoPanLeft()
{
　map.ContinuousPan(-10, 0, 20);
}
function DoPanRight()
{
　map.ContinuousPan(10, 0, 20);
}

缩放

下面增加两个按钮用于缩放：

＜input type="button" value="Zoom In" style="position:absolute;left:250px;top:630px;"/＞
＜input type="button" value="Zoom Out" style="position:absolute;left:340px;top:630px;"/＞

下面的代码实现ZoomIn和ZoomOut函数，每个函数给缩放尺度增或者减1。

function DoZoomIn() { map.ZoomIn(); }function DoZoomOut() { map.ZoomOut(); }

如果你按照上面所说进行编程，那么你的页面和文中开始的图是基本类似的。完整代码如下：

＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜style type="text/css" media=screen＞
＜!--
.pin
{
width:44px;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;background:#0000FF;
border:1px solid #FF0000;
z-index:5;
}
--＞
＜/style＞
＜script src="MapControl.js"＞＜/script＞
＜script＞
var map = null;
function OnPageLoad()
{
　map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 10, 100, 700, 500);
　document.body.appendChild(map.element);
　var updateInfo = function(e)
　{
　　document.getElementById("info").innerHTML =
　　　　’Latitude = ’ + e.latitude +
　　　　’, Longitude = ’ + e.longitude +
　　　　’, Zoom=’ + e.zoomLevel;
　}
　map.onEndContinuousPan = updateInfo;
　map.onEndZoom = updateInfo;
　map.onMouseClick = function(e)
　{
　　map.RemovePushpin(’pin’);
　　map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
　}
}
function ChangeMapStyle()
{
　var Aerial = document.getElementById("AerialStyleCheck");
　var Vector = document.getElementById("VectorStyleCheck");
　var s = ’r’;
　if (Aerial.checked && Vector.checked)
　{
　　s = ’h’;
　}
　else if (Aerial.checked)
　{
　　s = ’a’;
　}
　map.SetMapStyle(s);
}
function DoPanUp() { map.ContinuousPan(0, -10, 20); }
function DoPanDown() { map.ContinuousPan(0, 10, 20); }
function DoPanLeft() { map.ContinuousPan(-10, 0, 20); }
function DoPanRight() { map.ContinuousPan(10, 0, 20); }
function DoZoomIn() { map.ZoomIn(); }
function DoZoomOut() { map.ZoomOut(); }
＜/script＞
＜/head＞
＜body ＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" ＞
Aerial Style
＜/div＞
＜input type="button" value="Pan Up" style="position:absolute;left:60px;top:600px;"/＞
＜input type="button" value="Pan Left" style="position:absolute;left:10px;top:630px;"/＞
＜input type="button" value="Pan Right" style="position:absolute;left:100px;top:630px;"/＞
＜input type="button" value="Pan Down" style="position:absolute;left:45px;top:660px;"/＞
＜input type="button" value="Zoom In" style="position:absolute;left:250px;top:630px;"/＞
＜input type="button" value="Zoom Out" style="position:absolute;left:340px;top:630px;"/＞
＜/body＞
＜/html＞　　设置其他control的脚本