电竞比分网-中国电竞赛事及体育赛事平台

分享

由神秘到簡單 教你在網頁中添加微軟地圖

 kenwang 2006-01-06
由神秘到簡單 教你在網頁中添加微軟地圖
作者: 維維編譯
出處: 天極網
責任編輯: 方舟
[ 2005-10-11 15:44 ]
推薦閱讀 最新更新 繼續(xù)閱讀 相關主題 編輯新作 閱讀排行 討論本文 相關產品

  自Google推出地圖服務以后,微軟和百渡也相繼推出地圖服務。地圖成為目下網絡流行的時尚,如果你想追趕它,那么來吧,我將會幫助你學會使用微軟的Virtual Earth Map Control,為你的網站添加一道亮麗的風景。

  本文最終效果圖:


  MapControl控件

  Virtual Earth Map Control腳本可以在MSN網站下載:http://virtualearth./js/MapControl.js。

  當然你可以直接在網站中鏈接這個腳本,但這會導致一些安全上的問題,因為缺省情況下大部分的瀏覽器不會允許來自其他的不是當前正在瀏覽的站點的JavaScript程序運行。使用者必須確認他們允許來自VirtualEarth的腳本運行,這樣會給用戶不爽的感覺。

  簡單的方式就是下載MapControl.js文件到你的站點,這樣就可以輕松訪問并進行編程了。

  創(chuàng)建Map Control實例

  為了創(chuàng)建一個Map Control實例,你需要在你的頁面里寫一個小方法。這將會創(chuàng)建一個MapControl的實例,在頁面上放置它,并設置control里初始顯示的內容。

  VE_MapControl的構造函數(shù)原型如下:

VE_MapControl(Latitude, Longitude, Zoom, MapStyle, PositionType, Left, Top, Width, Height);

  Latitude:在control里顯示的地圖中心的緯度;

  Longitude:在control里顯示的地圖中心的經度;

  Zoom:顯示地圖的縮放尺度。可以設置為2到18的數(shù)。2是允許的最遠的俯瞰距離,18是允許的最近的俯瞰距離。

  MapStyle:顯示地圖的風格。目前有3種式樣可選:高空的(aerial),道路的(road)和混合的(hybrid)。用每種式樣的首字母小寫來代表該式樣。

  ·a-aerial:顯示高空的衛(wèi)星圖像。

  ·r-road:顯示地區(qū)的街道地圖;

  ·h-hybrid:顯示以上兩者的結合,衛(wèi)星圖像將和道路和位置信息重疊在一起。

  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的頁面可以如下創(chuàng)建:

<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的特性:

  ·拖動整個地圖刷新顯示

  ·使用鼠標滾輪進行縮放

  ·雙擊某個地點進行放大

    本站是提供個人知識管理的網絡存儲空間,所有內容均由用戶發(fā)布,不代表本站觀點。請注意甄別內容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權內容,請點擊一鍵舉報。
    轉藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多