文章导读1、MapControl控件2、从Map Control接收事件3、变换地图样式4、给地图增加图钉(pin)标记5、增加导航Control6、设置其他control的脚本7、缩放控制8、添加便笺条9、添加查找功能 　　从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 onLoad="OnPageLoad()"＞ ＜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 onLoad="OnPageLoad()"＞ ＜div id="info" style="font-size:10pt"＞ ＜/div＞ ＜/body＞ ＜/html＞

　　地图显示如下：

相关搜索：