首頁 > 其他

【Bing Map學習系列】(4)——如何在自己的頁面嵌入Silverlight地圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 一、添加一個簡單的Map
  • 二、利用嵌入式Map的特徵
  • 三、嵌入式Map URL參數

前面幾篇文章都是介紹利用Bing Map Control來顯示地圖，但是在操作方面對於新手而言有點複雜，如果你想更加簡便的接觸到Bing Map,本文將向你介紹如何將Silverlight地圖嵌入到自己的網頁中。

一、添加一個簡單的Map

為了在您的頁面內嵌入一個地圖，只需添加一個iframe標籤到你的頁面中，然後將src參數設定為嵌入地圖的URL即可。具體的方式如下：

1、建立一個簡單的HTML頁面，命名為AddEmbedingMap.htm。

2、修改其代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html><br /> <head><br /> <title>Embedded Map</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body style="font-family:Arial" mce_style="font-family:Arial"><br /> <p>A simple embedded map.</p><br /> <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"<br /> src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/road" mce_src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/road"/><br /> </body><br /></html><br />

3、通過HTTP規則瀏覽該頁面即可查看到你的頁面中有地圖資訊。 

二、利用嵌入式Map的特徵

你當然可以通過向地圖URL添加相關參數來定製嵌入式地圖，如下面代碼所示：將設定地圖風格為Aerial，Zoom等級為10，並設定為置中顯示，同時還在地圖中間添加圖釘(pushpin)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html><br /> <head><br /> <title>Embedded Map</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body style="font-family:Arial" mce_style="font-family:Arial"><br /> <p>A simple embedded map.</p><br /> <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"<br /> src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/aerial?zoomLevel=10¢er=47.5_-122.5&pushpins=47.5_-122.5" mce_src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/aerial?zoomLevel=10&center=47.5_-122.5&pushpins=47.5_-122.5"/><br /> </body><br /></html><br />

三、嵌入式Map URL參數

嵌入式Map URL參數的格式如下所示：

http://dev.virtualearth.net/embeddedMap/v1/silverlight/{mapMode}?zoomLevel={zoomLevel}¢er={center}&heading={heading}&pushpins={pushpins}&culture={culture}</p><p>

以下的表格羅列了Map URL的可用的參數資訊，這些參數能夠隨意排序，同時這些參數都是可選的。

Parameter Name Description

mapMode

用於描述地圖的風格.可用的值包括: Road, Aerial, AerialWithLabels, Birdseye, BirdseyeWithLabels

zoomLevel

一個 int 數值用於指示一個有效映像風格放大水平。

center

兩個 doubles 類型的數值描述相對於地圖中央的經度和緯度資訊。

heading

一個 double 類型的數值指定地圖的方位，單位為度。

pushpins

兩個 doubles 類型的數值描述相對於圖釘的經度和緯度資訊。 多個的圖釘定位利用~字元分離開來。

culture

一個有效 string類型，用於描述語言資訊，預設的值為 “en-us”.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More