本来想用google map的,但是谷歌服务器老是出问题,没办法,只好用百度地图顶上了。废话不说,马上看看效果:
第三步;编写cs文件
第一步:编写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);
}
}
}