silverlight 嵌入百度地图

本来想用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://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.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 嵌入百度地图

相关推荐