|
自Google推出地图服务以后，微软和百渡也相继推出地图服务。地图成为目下网络流行的时尚，如果你想追赶它，那么来吧，我将会帮助你学会使用微软的Virtual Earth Map Control，为你的网站添加一道亮丽的风景。
本文最终效果图：
MapControl控件
Virtual Earth Map Control脚本可以在MSN网站下载：http://virtualearth.msn.com/js/MapControl.js。
当然你可以直接在网站中链接这个脚本，但这会导致一些安全上的问题，因为缺省情况下大部分的浏览器不会允许来自其他的不是当前正在浏览的站点的JavaScript程序运行。使用者必须确认他们允许来自VirtualEarth的脚本运行，这样会给用户不爽的感觉。
简单的方式就是下载MapControl.js文件到你的站点，这样就可以轻松访问并进行编程了。
创建Map Control实例
为了创建一个Map Control实例，你需要在你的页面里写一个小方法。这将会创建一个MapControl的实例，在页面上放置它，并设置control里初始显示的内容。
VE_MapControl的构造函数原型如下：
VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width, Height);
Latitude：在control里显示的地图中心的纬度；
Longitude：在control里显示的地图中心的经度；
Zoom：显示地图的缩放尺度。可以设置为2到18的数。2是允许的最远的俯瞰距离，18是允许的最近的俯瞰距离。
MapStyle：显示地图的风格。目前有3种式样可选：高空的(aerial)，道路的(road)和混合的(hybrid)。用每种式样的首字母小写来代表该式样。
·a-aerial：显示高空的卫星图像。
·r-road：显示地区的街道地图；
·h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。
PositionType：control在页面上的放置的方式，可选项为相对(relative)和绝对(absolute)。
Left：control左边在页面上的位置。
Top：control上部在页面上的位置。
Width：control宽度。
Height：control高度。
例子：
map = new VE_MapControl(32.69, -117.13, 12, ’r’, "absolute", 400, 10, 400, 300);
一个简单的具有Virtual Earth map control的页面可以如下创建：
＜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＞
效果图如下所示，你可以使用一些control的特性：
·拖动整个地图刷新显示
·使用鼠标滚轮进行缩放
·双击某个地点进行放大
从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＞
地图显示如下：
 变换地图样式
上面我们已经介绍了有三种样式可以选择：
·a-aerial：显示高空的卫星图像。
·r-road：显示地区的街道地图；
·h-hybrid：显示以上两者的结合，卫星图像将和道路和位置信息重叠在一起。
当map control显示的时候，可以通过SetMapStyle函数来变换地图样式：
SetMapStyle(mapStyle)
函数通过mapStyle参数来设置式样，如上文所述，使用a，r或者h。
我们可以通过增加两个checkbox来允许用户改变地图样式：
＜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;
}
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);
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜/body＞
＜/html＞
效果如下：
给地图增加图钉(pin)标记
增加图钉标记的功能允许我们在map control上指出特殊位置。图钉在map control上显示覆盖的信息。AddPushpin方法的原型如下：
AddPushpin(id,lat,lon,width,height,className,innerHtml)
id：图钉的标识符。在map control上每个图钉都具有唯一的标识号。
lat：放置图钉的地点的纬度。
lon：放置图钉的地点的经度。
width：图钉的宽度。
height：图钉的高度。
width和height使用来计算图钉的偏移，使得图钉可以放置到指定的经纬度。
提示：如果你希望使得图钉的底部右脚处于指定的经纬度，你需要将这些值乘2：
Classname：图钉的样式类型(style class)的名称。如果没有这个参数图钉不会显示。样式可以通过CSS文件描述或者通过嵌入式的代码描述。
innerHTML：显示在图钉上的文字。
下面的例子中，使用onMouseClick事件，当用户点击的时候给点击处增加一个图钉：
＜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.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);
}
＜/script＞
＜/head＞
＜body onLoad="OnPageLoad()"＞
＜div id="info" style="font-size:10pt"＞
＜/div＞
＜div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px"＞
＜input id="VectorStyleCheck" type="checkbox" onclick="ChangeMapStyle()" checked="checked"＞
Street Style
＜input id="AerialStyleCheck" type="checkbox" onclick="ChangeMapStyle()"＞
Aerial Style
＜/div＞
＜/body＞
＜/html＞
这样会导致一些问题：
·每次地图被拖动时，另外一个图钉被增加。
·双击地图进行放大的功能无法完成，因为每次接收到双击事件，图钉首先会被增加。
·单个标识符可以增加多个图钉。
一个解决方案是对onMouseClick事件进行特殊处理，我们可以每次增加一个图钉的时候移除以前的图钉。
使用RemovePushpin函数移去一个图钉：
RemovePushpin(id);
这个函数通过传入的id标识符来去除某个图钉。
去除一个图钉也会同时移去所有相同标识符的图钉。
上文中的代码可以修改以移去以前所有的图钉：
map.onMouseClick = function(e){
map.RemovePushpin(’pin’);
map.AddPushpin(’pin’, e.latitude, e.longitude, 88, 34, ’pin’, ’MyPin’);
} 这样就只有一个图钉来标明上次点击的位置：
增加导航Control
map control有一些内在的导航特性，但是有些时候需要提供一些额外的control在web页面上来允许用户来控制地图的导航。下面我们介绍如何在web页面上增加按钮来控制地图的显示。
载入
我们首先为地图的移动增加按钮。在HTML的Body元素中可以增加一些简单的HTML代码：
＜input type="button" value="Pan Up" onclick="DoPanUp()" style="position:absolute;left:60px [1] [2] [3] [4] 下一页
没有相关教程
|
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
