概述

本来想用google map的，但是谷歌服务器老是出问题，没办法，只好用百度地图顶上了。废话不说，马上看看效果：第一步：编写aspx文件： <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

本来想用google map的，但是谷歌服务器老是出问题，没办法，只好用百度地图顶上了。废话不说，马上看看效果：

第一步：编写aspx文件：

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>CoverMapDemo</title>

    <style type="text/css">
    html,body {
     height: 100%;
     overflow: auto;
    }
    body {
     padding: 0;
     margin: 0;
    }
    #silverLightcontrolHost {
     height: 20%;
     text-align:center;
    }
    </style>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #allmap {width: 100%;height: 80%;overflow: hidden;margin:0;}
        #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
        #r-result{height:100%;width:20%;float:left;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender,args) {
            var appsource = "";
            if (sender != null & sender != 0) {
              appsource = sender.getHost().source;
            }
            
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
              return;
            }

            var errMsg = "Silverlight 应用程序中未处理的错误 " +  appsource + "\n" ;

            errMsg += "代码: "+ iErrorCode + "    \n";
            errMsg += "类别: " + errorType + "       \n";
            errMsg += "消息: " + args.Errormessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "文件: " + args.xamlFile + "     \n";
                errMsg += "行: " + args.linenumber + "     \n";
                errMsg += "位置: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {           
                if (args.linenumber != 0) {
                    errMsg += "行: " + args.linenumber + "     \n";
                    errMsg += "位置: " +  args.charPosition + "     \n";
                }
                errMsg += "方法名称: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>

<body>  
  <form id="form1" runat="server" style="height:100%;">
      <div id="allmap"></div>
      <div id="silverLightcontrolHost">
    <object id="silverLightObj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
     <param name="source" value="ClientBin/CoverMapDemo.xap"/>
     <param name="onerror" value="onSilverlightError" />
     <param name="BACkground" value="white" />
     <param name="minRuntimeVersion" value="3.0.40818.0" />
     <param name="autoUpgrade" value="true" />
     <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none;">
          <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="获取 Microsoft Silverlight" style="border-style: none"/>
     </a>
    </object><iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'></iframe></div>
  </form>
</body>
</html>

<script type="text/javascript">
    var map = new BMap.Map("allmap");            // 创建Map实例
    var point = new BMap.point(116.404,39.915);    // 创建点坐标
    map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    
    function showInfo(lng,lat) {
        //alert(e.point.lng + "," + e.point.lat);
        var plugin = document.getElementById("silverLightObj");
        plugin.Content.Mark.MapMark(lng,lat);
    }

    var contextMenu = new BMap.ContextMenu();
    var txtMenuItem = [
      {
          text: '放大',callBACk: function() { map.zoomIn() }
      },{
          text: '缩小',callBACk: function() { map.zoomOut() }
      },{
          text: '在此添加标注',callBACk: function(p) {
              var marker = new BMap.Marker(p),px = map.pointToPixel(p);
              map.addOverlay(marker);
              marker.addEventListener("click",function() {
                  var str = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>标注</h4>"
                  + "<img style='float:right;margin:4px' id='imgDemo' src='img/tt.jpg' width='139' height='104' title='天安门'/>"
                  + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>纬度：" + p.lat + "</p>"
                  + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>经度：" + p.lng + "</p>";
                  var infoWindow = new BMap.InfoWindow(str);
                  this.openInfoWindow(infoWindow);
              });
          }
      }
     ];


    for (var i = 0; i < txtMenuItem.length; i++) {
        contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callBACk,100));
        if (i == 1 || i == 3) {
            contextMenu.addSeparator();
        }
    }
    map.addContextMenu(contextMenu);

    function AddMark(arg) {
        var args = arg.split("*");
        var marker = new BMap.Marker(new BMap.point(args[0],args[1]));  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        marker.addEventListener("click",function() {
            var str = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>标注</h4>"
                      + "<img style='float:right;margin:4px' id='imgDemo' src='img/tt.jpg' width='139' height='104' title='天安门'/>"
                      + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>纬度：" + lat + "</p>"
                      + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>经度：" + lng + "</p>";
            var infoWindow = new BMap.InfoWindow(str);
            this.openInfoWindow(infoWindow);
        });
        //alert(args[0]);
    }
    
    //map.addEventListener("click",showInfo);
</script>

第二步：编写xaml文件:

<UserControl x:Class="CoverMapDemo.MainPage"
    xmlns="http://scheR_529_11845@as.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://scheR_529_11845@as.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://scheR_529_11845@as.microsoft.com/expression/blend/2008" xmlns:mc="http://scheR_529_11845@as.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">   
        
        <Grid.RowDeFinitions>
            <RowDeFinition MaxHeight="30"></RowDeFinition>
            <RowDeFinition MaxHeight="30"></RowDeFinition>
            <RowDeFinition MaxHeight="30"></RowDeFinition>
        </Grid.RowDeFinitions>
        
        <Grid.columnDeFinitions>
            <columnDeFinition Width="20"></columnDeFinition>
            <columnDeFinition Width="80"></columnDeFinition>
            <columnDeFinition Width="200"></columnDeFinition>
            <columnDeFinition></columnDeFinition>
        </Grid.columnDeFinitions>
        
        <TextBlock 
            Text="纬度：" 
            Grid.Row="0" 
            Grid.column="1" 
            TextAlignment="Center" 
            FontSize="20"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">            
        </TextBlock>
        
        <TextBox 
            Name="tbLat" 
            Grid.Row="0" 
            Grid.column="2" 
            Width="200" 
            Height="30">            
        </TextBox>
        
        <Button 
            Content="添加标记" 
            Width="100"
            Height="30" 
            Name="btnMark"
            Click="Button_Click"
            Grid.Row="1" 
            Grid.column="3">
        </Button>
        
        <TextBlock 
            Text="经度：" 
            Grid.Row="1" 
            Grid.column="1"
            TextAlignment="Center" 
            FontSize="20"
            VerticalAlignment="Center"
            HorizontalAlignment="Center">            
        </TextBlock>
        
        <TextBox 
            Name="tbLon" 
            Grid.Row="1" 
            Grid.column="2" 
            Width="200" 
            Height="30">            
        </TextBox>
    </Grid>
</UserControl>

第三步；编写cs文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.browser;

namespace CoverMapDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            HtmlPage.RegisterScriptabLeobject("Mark",this);
        }

        [ScriptableMember]
        public void MapMark(String lon,String lat)
        {
            //messageBox.Show("我是SilverLight项目中的messageBox","o(∩_∩)o 哈哈",messageBoxButton.oK);
            tbLat.Text = lat;
            tbLon.Text = lon;
        }

        private void Button_Click(object sender,RoutedEventArgs E)
        {
            if (tbLat.Text == "" || tbLon.Text == "")
            {
                messageBox.Show("请先输入坐标");
                return;
            }
            String lng = tbLon.Text;
            String lat = tbLat.Text;
            String arg = lng + "*" + lat;
            ScriptObject addMark = HtmlPage.Window.GetProperty("AddMark") as ScriptObject;
            addMark.InvokeSelf(arg);
        }
    }
}

大佬总结

以上是大佬教程为你收集整理的silverlight 嵌入百度地图全部内容，希望文章能够帮你解决silverlight 嵌入百度地图所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：silverlight 地图嵌入百度

上一篇: silverlight toolkit Chart（一）下一篇:企业级应用开发silverlight+WCF+...

猜你在找的silverlight相关文章

silverlight – 如何在Windows Phone 7中创建连续动画？ 2022-05-04
wpf – 嵌入图像在UserControl中不显示 2022-05-03
WPF的Deepzoom 2022-05-03
silverlight – 设置ComboBoxItem的文本和值 2022-05-03
wpf – 寻找股票图表组件 2022-05-03
如何在Silverlight中以编程方式转到特定的URL？ 2022-05-03
Silverlight Webservice“远程服务器返回错误：NotFound” 2022-05-03
osx – 无法输入Silverlight 5输入字段(Chrome)MacOS 2022-05-03
客户端WCF DataContract具有来自服务的空/空值 2022-05-03
使用MVVM Light Messenger与Silverlight 4 ChildWindow对话框类 2022-05-03