【Bing Map学习系列】(4)——如何在自己的页面嵌入Silverlight地图

前面几篇文章都是介绍利用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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Embedded Map</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body style="font-family:Arial" mce_style="font-family:Arial"> <p>A simple embedded map.</p> <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/road" mce_src="http://dev.virtualearth.net/embeddedMap/v1/silverlight/road"/> </body> </html>

3、通过HTTP规则浏览该页面即可查看到你的页面中有地图信息。 

二、利用嵌入式Map的特征

你当然可以通过向地图URL添加相关参数来定制嵌入式地图,如下面代码所示:将设置地图风格为Aerial,Zoom等级为10,并设置为居中显示,同时还在地图中间添加图钉(pushpin)。

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

三、嵌入式Map URL参数

嵌入式Map URL参数的格式如下所示:

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

以下的表格罗列了Map URL的可用的参数信息,这些参数能够随意排序,同时这些参数都是可选的。

Parameter Name Description

mapMode

用于描述地图的风格.可用的值包括: Road, Aerial, AerialWithLabels, Birdseye, BirdseyeWithLabels

zoomLevel

一个 int 数值用于指示一个有效的图像风格放大水平。

center

两个 doubles 类型的数值描述相对于地图中央的经度和纬度信息。

heading

一个 double 类型的数值指定地图的方位,单位为度。

pushpins

两个 doubles 类型的数值描述相对于图钉的经度和纬度信息。 多个的图钉定位利用~字符分离开来。

culture

一个有效的 string类型,用于描述语言信息,默认的值为 “en-us”.

你可能感兴趣的:(html,XHTML,iframe,嵌入式,silverlight,bing)