基于高德地图API 开发WP7地图应用

junwong 发布于 2012/03/05 16:53
阅读 1K+
收藏 0

首先去 http://q.weibo.com/457681/file/13470763 下载 开发包和示例

以前的示例可以看一下!

我们来新增一个例子!

新增一个

AddMarkers.xaml  先把地图初始化方法见示例里的DisplayMap.xaml

在MainPage.xaml 增加 多点添加 连接到 AddMarkers.xaml

好第一步AddMarkers.xaml.cs 里添加一个点

代码如下

public partial class AddMarkers : PhoneApplicationPage
{
MMarker maker1;
public AddMarkers()
{
InitializeComponent();

InitAddOverlays();
}


public void InitAddOverlays()
{
if ( null==maker1)
{
maker1 = new MMarker( new MLngLat( 116.3, 36.5)); // 初始化点
map.Children.Add(maker1); // 添加点
map.Center = maker1.LngLat; // 把改点设为地图中心点
}
}
}
}

点就添加好了还挺容易吧!

好现在让我们添加一个TIP,就是标注点的信息 

MTip tip = new MTip();
tip.Title = " 这是一个点! ";
tip.ContentText = " 这里是点的内容! ";
maker1.TipFrameworkElement = tip; // 把tip信息与点绑定

点击点就能看到如下效果!

效果如下

 

我们看到MMarker 有个属性 

TipFrameworkElement 为什么叫FrameworkElement是这样,MMarker.TipFrameworkElement 接受的值为FrameworkElement类型,也就是说, 你可以自己定义一个Grid 然后覆盖物MMarker显示该Grid 并随着地图移动而移动!好了我们动手吧! 先设计一个Grid 我就懒得弄了,把 吾得地图 的Grid 拿了过来了,不怎么好看,您自己设计吧,我不是很懂设计,呵呵 添加到XAML
<Grid x:Name= " BusOrCar " Visibility= " Collapsed " Background= " {StaticResource PhoneAccentBrush} " Height= " 150 " Width= " 250 " Opacity= " 0.8 " >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height= " Auto "/>
<RowDefinition Height= " Auto "/>
<RowDefinition Height= " Auto "/>
<RowDefinition Height= " Auto "/>
</Grid.RowDefinitions>
<Grid Background= " White " Grid.Row= " ">
<TextBlock Text= " 根据选择点查询: " />
<Image Source= " /ContentImage/close.png " Stretch= " None " HorizontalAlignment= " Right " Tap= " Image_Tap "></Image>
</Grid>
<TextBlock Text= " 起点: " Foreground= " White " Grid.Row= " 1 " Margin= " 10,0,181,0 " VerticalAlignment= " Center "></TextBlock>
<TextBlock Text= " 终点: " Foreground= " White " Grid.Row= " 2 " Margin= " 10,0 " VerticalAlignment= " Center "></TextBlock>
<TextBlock Text= "" Foreground= " White " x:Name= " start " Grid.Row= " 1 " Margin= " 70,0,-60,0 " Width= " 240 "></TextBlock>
<TextBlock Text= "" Foreground= " White " x:Name= " end " Grid.Row= " 2 " Margin= " 70,0,-60,0 " Width= " 240 "></TextBlock>
<Button Content= " 查公交 " Style= " {StaticResource ButtonStyle1} " Margin= " -120,-5,0,0 " Width= " 130 " Height= " 70 " Grid.Row= " 3 " Click= " Bus_Button_Click " />
<Button Content= " 查驾车 " Style= " {StaticResource ButtonStyle1} " Margin= " 120,-5,0,0 " Width= " 130 " Height= " 70 " Grid.Row= " 3 " Click= " CarButton_Click " />
</Grid>
</Grid>
cs里为


maker1.TipFrameworkElement = BusOrCar;


void Image_Tap( object obj,EventArgs args)
{
BusOrCar.Visibility = System.Windows.Visibility.Collapsed;
}

效果如下,Grid 可以与Marker 移动了

到这里就基本上完成了,多点你就自己写集合添加吧,不难!

这里还有一个高级应用,就是添加在地图里的覆盖物有2个附件属性,所有的

FrameworkElement都可以附加 MapLayer.AnchorProperty(锚点) 属性和 MapLayer.LngLatProperty(经纬度) 这样添加在地图里的覆盖物就可以定位到一个位置! 好我们在来一个例子:执行一下方法就可以了! 这回这个Grid 不依赖任何覆盖物,您如果还需要依赖MMarker 你可以自己写一个类继承 MMarker 然后有个属性为UserControl 或者ContentControl 做为自定义Tip
void AddGrid()
{
BusOrCar.SetValue(MapLayer.AnchorProperty, new Point( 0.5, 1)); // 附加属性以Grid的中下部为锚点
BusOrCar.SetValue(MapLayer.LngLatProperty, new MLngLat( 116.5, 39.5)); // 附加属性以Grid的地图位置

map.Children.Add(BusOrCar); // 添加到地图
BusOrCar.Visibility = System.Windows.Visibility.Visible; // xaml里隐藏了,记得显示
}

其实 BusOrCar 这个 Grid 我偷懒了,按理应该自己写一个UserControl 或者ContentControl 更利于我们复用,道理都是一样的,具体怎么发挥就要看您的灵感了!

 

示例 和 SDK 都打包放到这里了 http://q.weibo.com/457681/file/49366115 欢迎下载!

 

由于 高德的WP7-SDK 还是测试版本所以..... 有问题反馈不要骂娘,好了,还有其它的可以微博和我联系!~ 

 

 


原文链接:http://www.cnblogs.com/piaocz/archive/2012/03/04/2379606.html
加载中
返回顶部
顶部