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

核心提示： ·双击某个地点进行放大从Map Control接收事件当control上显示的地图变化的时候，map control会触发事件，教你在网页中添加微软地图(3)，事件提供了有关地图的相关信息，你可以从control上获取的事件有：· onStartContinuousPan· onEndCo

·双击某个地点进行放大

　　从Map Control接收事件

当control上显示的地图变化的时候，map control会触发事件，事件提供了有关地图的相关信息。

你可以从control上获取的事件有：

· onStartContinuousPan

· onEndContinuousPan

· onStartZoom

· onEndZoom

· onMouseClick

· onMouseDown

· onMouseUp

所有的事件函数都传入一个参数。事件参数在MapControl.js这样被定义：

function VE_MapEvent(srcMapControl,latitude,longitude,zoomLevel)
{
　this.srcMapControl=srcMapControl;
　this.latitude=latitude;
　this.longitude=longitude;
　this.zoomLevel=zoomLevel;
}

纬度(latitude)和经度(longitude)表明了地图的中心位置。缩放尺度(zoomlevel)提供了可以缩放的尺度的量。

我们首先看到的是第一个event--载入事件(panning event)。每次地图开始或者停止载入或者卷动(scrolling)时都会触发此事件。当地图开始卷动时onStartContinousPan事件会触发，当map control停止卷动地图时onEndContinousPan事件会被触发。

我们可以给上一步中创建的简单页面增加一些代码，来处理onEndContinuousPan事件，显示当前map的中心信息。

代码如下：

＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜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);
　map.onEndContinuousPan = function(e)
　{
　　document.getElementById("info").innerHTML =’Latitude = ’ + e.latitude +
　　　　　’, Longitude = ’ + e.longitude +
　　　　　’, Zoom=’ + e.zoomLevel;
　}
}
＜/script＞
＜/head＞
＜body ＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜/body＞
＜/html＞

我们可以通过增加一个函数处理onEndZoom事件完成以上功能：

＜html＞
＜head＞
＜title＞My Virtual Earth＜/title＞
＜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;
}
＜/script＞
＜/head＞
＜body ＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜/body＞
＜/html＞

地图显示如下：