在Silverlight 2应用程序中集成Virtual Earth

概述

Virtual Earth是什么,我想不用多做解释了。微软在推出自己的Virtual Earth之后,开放了大量的APIs,使得我们可以方便集成到自己的应用程序中。

本文将介绍如何在自己的Silverlight 2应用程序中集成Virtual Earth。

在HTML中集成

在开始之前,我们先来简单看一下如何在HTML中集成Virtual Earth,大家可以去这里查询相关APIs,我们来看看如何加载默认地图,如下代码所示:

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" 
            src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
      <script type="text/javascript">
          var map = null;
                
          function GetMap()
          {
             map = new VEMap('myMap');
             map.LoadMap();
          }   
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:480px; height:320px;"></div>
   </body>
</html>

其实这段代码非常简单的简单,首先引入Virtual Earth Map控件,并且使用JavaScript来加载地图。

TerryLee_0094

这是最简单的一个示例,但是并没有多大实用价值,下面我们再看一个如何在查找地图上的特定位置的示例,如下代码所示:

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script type="text/javascript" 
        src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
      <script type="text/javascript">
      var map = null;
            
      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
      }   
         
      function FindLoc()
      {
         try
         {
            var where = document.getElementById('txtWhere').value;
            map.Find(null, where);
         }
         catch(e)
         {
            alert(e.message);
         }
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:500px; height:300px;"></div>
      <input id="txtWhere" type="text" name="txtWhere"/>
      <input id="find" type="button" value="Find" name="find" onclick="FindLoc();"/>
   </body>
</html>

其实查找位置也特别简单,直接调用VEMap对象的Find()方法即可,运行后,查找“Beijing”如下图所示:

TerryLee_0095

在Silverlight中集成

通过上面的两个示例,大家看到了,在HTML中加载Virtual Earth都是使用JavaScript来完成,我们知道Silverlight 2应用程序可以很容易的实现与JavaScript的交互,意味着我们可以在Silverlight 2应用程序中通过调用JavaScript代码来实现集成,这种方式的确是可以的,但如果要编写非常复杂的Virtual Earth应用,实现起来也是一件不容易的事。

好在有一个开源项目可以帮助我们,使用托管代码在Silverlight 2中实现Virtual Earth应用。该项目名称为“Virtual Earth Wrapper for Silverlight”,官方地址:http://www.codeplex.com/views,当前版本是1.1。该项目使用托管代码来封装了所有Virtual Earth中的JavaScript应用,使得我们编写Virtual Earth与Silverlight 2集成应用程序变得非常简单。下面我们看一个简单的示例,如何在Silverlight中加载Virtual Earth。

在下载Virtual Earth Wrapper for Silverlight后解压缩,会看到有两个程序集和一个JavaScript文件。首先在HTML中引入相关的JS脚本,如下代码所示:

<head>
    <script type="text/javascript" 
        src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
    <script type="text/javascript" src="views.js"></script>
</head>

其中views.js在压缩包里面有,然后添加一个div,用来作为地图容器:

<div id='mapContainer' style="position:relative; width:500px; height:300px;"></div>

编写一段脚本,定义一个silverlight变量,该变量在此处虽然没有做任何事,但它将会在views.js文件中被运用:

<script type="text/javascript">
    var silverlight = null;
    function pluginLoaded(sender,args)
    {
        silverlight = document.getElementById('Silverlight');
    }
</script>

编写Silverlight Object,指定onLoad事件,如下代码所示:

<div id="silverlightControlHost" style="position:absolute; width:300px; height:480px; 
                left:10px; top:320px; z-index:2">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" 
        style="width:500px;height:50px;border-width:0;" id="Silverlight">
    <param name="onLoad" value="pluginLoaded" />
    <param name="source" value="ClientBin/SilverlightIntegrateVirtualEarth.xap"/>
    <param name="background" value="white" />
</object>
</div>

现在来看Silverlight中的代码编写,首先引入ScriptInterop.dll和VIEWS.dll两个程序集,并引入相关的命名空间。在Page_Loaded事件中加入:

void Page_Loaded(object sender, RoutedEventArgs e)
{
    VEMap map = new VEMap("mapContainer");
    HtmlPage.RegisterScriptableObject("SLMAP", map);
    map.LoadMap();
}

代码非常简单,创建一个VEMap对象,这里的mapContainer就是我们刚才定义的地图容器,而SLMAP则是注册的对象别名,注意这个名称不能修改,因为在views.js中将会用到。现在运行后可以看到加载的地图:

TerryLee_0096

现在我们再看一下如何在Silverlight中加入查找位置的功能,代码非常简单:

VEMap map;
void Page_Loaded(object sender, RoutedEventArgs e)
{
    map = new VEMap("mapContainer");
    HtmlPage.RegisterScriptableObject("SLMAP", map);
    map.LoadMap();
}

void btnFind_Click(object sender, RoutedEventArgs e)
{
    map.Find(null, this.txtWhere.Text);
    map.LoadMap();
}

效果如下图所示:

TerryLee_0097

除此之外,我们还可以开发更加复杂的应用,如添加层、实现3D效果等,下面是作者给出的一个示例效果:

TerryLee_0098 

可以到这里下载该示例。

总结

本文简单介绍了如何使用VIEWS项目实现Silverlight 2与Virtual Earth的集成,希望对大家有所帮助。

本文示例下载:

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2008-07-01 21:52 TerryLee 阅读(5589) 评论(39)  编辑 收藏 网摘 所属分类: [03]  银光点亮世界

  回复  引用  查看    
#1楼 2008-07-01 21:57 | 真见      
抢先沙发。。貌似强制下载不是很友好。。
  回复  引用  查看    
#2楼 [楼主]2008-07-01 22:03 | TerryLee      
@真见
强制下载指的是?
  回复  引用  查看    
#3楼 2008-07-01 22:08 | 真见      
@TerryLee
就是页面Response时打开的保存对话框==》http://cid-e532a87883949712.skydrive.live.com/embedrowdetail.aspx/Public/Examples/SilverlightIntegrateVirtualEarth.zip 我刚进来的时候吓了一跳滴。
  回复  引用  查看    
#4楼 [楼主]2008-07-01 22:12 | TerryLee      
@真见
我看一下,这是从SkyDrive.live.com上拷过来的代码,没有注意会有这个问题
  回复  引用    
#5楼 2008-07-01 22:14 | 肥田小鱼 [未注册用户]
前段时间一直关注博主的文章,也学习了很多关于silverlight的东西,感觉非常好,可惜现在没有时间向博主学习了,有事情要忙啊,等忙完了在接着向博主学习,
  回复  引用  查看    
#6楼 [楼主]2008-07-01 22:17 | TerryLee      
@肥田小鱼
嗯,学习一下Silverlight挺好的:)
  回复  引用  查看    
#7楼 2008-07-01 22:21 | falling-stone      
一直喜欢你的sl系列,谢谢了。
ps:貌似popfly这个网站就是用的silverlight做的virtual earth
  回复  引用  查看    
#8楼 [楼主]2008-07-01 22:22 | TerryLee      
@falling-stone
客气了:)

// Popfly网站我没怎么关注过,不太清楚,是用什么做的,呵呵
  回复  引用  查看    
#9楼 2008-07-01 22:29 | falling-stone      
--引用--------------------------------------------------
TerryLee: @falling-stone
客气了:)

// Popfly网站我没怎么关注过,不太清楚,是用什么做的,呵呵
--------------------------------------------------------
www.popfly.com,我也是好奇就去这个网站
  回复  引用  查看    
#10楼 2008-07-01 22:48 | Anytao      
快,实在是快
  回复  引用  查看    
#11楼 [楼主]2008-07-01 22:52 | TerryLee      
@falling-stone
去看看:)
  回复  引用  查看    
#12楼 [楼主]2008-07-01 22:53 | TerryLee      
@Anytao
:)
  回复  引用  查看    
#13楼 2008-07-01 23:44 | 李涛      
老大,你的时间都从那里来的?
太快了!
  回复  引用  查看    
#14楼 [楼主]2008-07-02 00:26 | TerryLee      
@李涛
时间是挤出来的,呵呵^_^
  回复  引用    
#15楼 2008-07-02 02:44 | 试验机 [未注册用户]
怎样卸载silverlight。*
  回复  引用    
#16楼 2008-07-02 07:50 | eee [未注册用户]
说强制下载的,恐怕是开了迅雷吧。
  回复  引用  查看    
#17楼 [楼主]2008-07-02 09:29 | TerryLee      
@试验机
在控制面板-添加删除程序里面可以卸载:)
  回复  引用  查看    
#18楼 [楼主]2008-07-02 09:29 | TerryLee      
@eee
有可能,在我这儿没有强制下载:)
  回复  引用    
#19楼 2008-07-02 09:41 | 生者坚强 [未注册用户]
这样就方便多了, 开发的时候, 可以将一些变量做成SILVERLIGHT USER CONTROL 的属性, 如:DIV的name "mapContainer", 这样就可以将XAML独立于HOST页面
  回复  引用  查看    
#20楼 [楼主]2008-07-02 09:51 | TerryLee      
@生者坚强
是的,有了VIEWS好多了:)
  回复  引用  查看    
#21楼 2008-07-02 10:03 | 长沙小能      
关注并学习中
  回复  引用    
#22楼 2008-07-02 10:44 | 浪剑仙客 [未注册用户]
李老师,代码运行有错误
  回复  引用  查看    
#23楼 [楼主]2008-07-02 10:50 | TerryLee      
@长沙小能
:)
  回复  引用  查看    
#24楼 [楼主]2008-07-02 10:50 | TerryLee      
@浪剑仙客
我删除了VIEWS程序集,你需要下载并添加到Silverlight项目中。
  回复  引用    
#25楼 2008-07-02 10:57 | 看笑话 [未注册用户]
ve用于商业是免费的不?如果是我打算研究下
  回复  引用  查看    
#26楼 [楼主]2008-07-02 11:28 | TerryLee      
@看笑话
基于Microsoft Public License协议公开
  回复  引用    
#27楼 2008-07-02 13:06 | 浪剑仙客 [未注册用户]
@TerryLee
我在网上没有找到那个组件,请问到哪里下载,谢谢
  回复  引用  查看    
#28楼 [楼主]2008-07-02 13:10 | TerryLee      
@浪剑仙客
文章中有地址啊

你也可以直接打开这个地址:
http://www.codeplex.com/views/Release/ProjectReleases.aspx?ReleaseId=14873
  回复  引用  查看    
#29楼 2008-07-02 14:25 | jillzhang      
哈哈,我也学习sliverlight的冲动啦
  回复  引用  查看    
#30楼 [楼主]2008-07-02 15:13 | TerryLee      
@jillzhang
一起学习吧,呵呵:)
  回复  引用    
#31楼 2008-07-02 15:16 | 呵~ [未注册用户]
支持李大哥,太强悍了!
  回复  引用    
#32楼 2008-07-02 16:27 | linda85 [未注册用户]
@TerryLee
Silverlight显示图片时,该图片是被一起包含在.XAP文件中下载到客户端的,不知道播放视频文件时,是怎么下载的?谢谢
  回复  引用  查看    
#33楼 [楼主]2008-07-02 23:02 | TerryLee      
@呵~
谢谢:)
  回复  引用  查看    
#34楼 [楼主]2008-07-02 23:02 | TerryLee      
@linda85
对于视频文件你可以自行进行控制,按需下载或者打包都是可以的,完全根据你的需要而定。
  回复  引用    
#35楼 2008-07-03 11:24 | 浪剑仙客 [未注册用户]
@TerryLee
呵呵,谢谢了
  回复  引用    
#36楼 2008-07-03 15:18 | linda85 [未注册用户]
@TerryLee
谢谢~~
  回复  引用    
#37楼 2008-07-19 09:53 | 生者坚强 [未注册用户]
我现在遇到一个问题:
执行MAP.FIND方法之后,我想获得查询结果,应该是使用FindCompleted事件获得,可是现在却不触发此事件. ViewChang事件可以触发

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
this.btnFind.Click += new RoutedEventHandler(btnFind_Click);
}

VEMap map;
void Page_Loaded(object sender, RoutedEventArgs e)
{
map = new VEMap("mapContainer");
//
map.ViewChanged += new EventHandler<VEMapEventArgs>(map_ViewChanged);
map.FindCompleted += new EventHandler<FindCompletedEventArgs>(map_FindCompleted);
//
HtmlPage.RegisterScriptableObject("SLMAP", map);

map.LoadMap();
}

void btnFind_Click(object sender, RoutedEventArgs e)
{
try
{
FindOptions opt = new FindOptions();
opt.Callback = true;
opt.CreateResults = true;
opt.NumberOfResults = 20;
opt.UseDefaultDisambiguation = true;
opt.StartIndex = 0;
opt.ShowResults = true;
map.Find(null, this.txtWhere.Text, opt);
//map.LoadMap();
}
catch(Exception ex)
{
ex.ToString();
}
}

void map_FindCompleted(object sender, FindCompletedEventArgs e)
{
try
{
VEFindResult[] results = e.Results;
int i = results.Length;
}
catch(Exception ex)
{
ex.ToString();
}
}

void map_ViewChanged(object sender, VEMapEventArgs e)
{
int i = e.ClientX;
}
}

IE错误提示: 'silverlight.content' is null or not an object
  回复  引用    
#38楼 2008-07-19 12:49 | 生者坚强 [未注册用户]
知道为什么了, pluginLoaded 没有被执行到,silverlight变量是null.

需要为OnPluginLoaded 事件指定函数pluginLoaded, 应该是这样:

<asp:Silverlight ID="Silverlight" OnPluginLoaded="pluginLoaded" runat="server" Source="~/ClientBin/SilverlightIntegrateVirtualEarth.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
  回复  引用  查看    
#39楼 [楼主]2008-07-21 10:34 | TerryLee      
@生者坚强
现在可以了就好。

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-07-01 22:12 编辑过
Google站内搜索


China-pub 计算机图书网上专卖店!6.5万品种 2-8折!
近千种 9-95 新二手计算图书火热销售中!

相关文章:


相关搜索:
Silverlight Windows Live Virtual Earth

相关链接: