微软Bing Maps Silverlight Control实现了最基本的地图呈现功能,其功能其他是非常的强大,可以支持很多的扩展功能开发,本文通过自定义功能导航菜单为例介绍基于Bing Maps Silverlight Control的扩展功能开发。
要实现自定义功能导航菜单很简单,应该说做过Silverlight开发的朋友都非常的熟悉,Silverlight程序由不同的UIElement元素组成,它可以是一个文字图层,也可以是一个动画层,甚至是视频等多媒体元素,最后形成一个完整的Silverlight应用。微软的Bing Maps Silverlight Control同样如此,实现自定义功能导航条的原理就是将地图控件原有的导航条所对应的UIElement从界面容器上移除,然后将自己自定义的图层添加到地图容器上便实现了自定义功能导航条。
微软Bing Maps Silverlight Control中实现导航条功能的功能主要由抽象类NavigationBarCommandBase提供接口,我们要完成自定义功能导航菜单就可以直接实现该抽象类来完成我们自己的功能。比如我们想在地图的导航功能条上加上“重庆”,点击重庆的时候就将地图定位到重庆地图,那么可以如下实现:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->1publicclassCustomCommand:NavigationBarCommandBase
2{
3publicstringCityName{get;set;}
4
5publicCustomCommand(stringname)
6{
7this.CityName=name;
8}
9
10publicoverridevoidExecute(Microsoft.Maps.MapControl.Core.MapBasemap)
11{
12doublelongitude=0d;
13doublelatitude=0d;
14
15//根据指定地点的经度和纬度进行定位
16if(CityName.Equals("重庆"))
17{
18longitude=double.Parse("106.489384971208");
19latitude=double.Parse("29.5076372217973");
20map.ZoomLevel=8;
21}
22
23map.Center=newLocation(latitude,longitude);
24
25NavigationBarCommandStatusstatus=this.GetStatus(map);
26if(status==NavigationBarCommandStatus.Checked)
27{
28map.ScaleVisibility=Visibility.Collapsed;
29}
30elseif(status==NavigationBarCommandStatus.Normal)
31{
32map.ScaleVisibility=Visibility.Visible;
33}
34}
35
36publicoverrideNavigationBarCommandStatusGetStatus(Microsoft.Maps.MapControl.Core.MapBasemap)
37{
38returnbase.GetStatus(map);
39}
40}
通过实现Execute方法,将地图动态定位到重庆的经度和纬度的位置就OK了。如上完成了自定义的功能菜单导航的功能处理类,接下来就是需要处理Bing Maps控件的界面模板了。功能导航条的界面模板分为横向和竖向导航条模板容器,分别为:HorizontalPanel和VerticalPanel,实现自定义功能导航条既移除原始的UIElement然后将自定义的NavigationBarCommand作为导航功能元素添加到模板容器内就完成了。
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->1publicpartialclassMainPage:UserControl
2{
3publicMainPage()
4{
5InitializeComponent();
6myMap.MapForeground.TemplateApplied+=delegate(objectsender,EventArgsargs)
7{
8myMap.MapForeground.NavigationBar.TemplateApplied+=delegate(objectobj,EventArgse)
9{
10//清除导航菜单上现有项
11NavigationBarnavBar=myMap.MapForeground.NavigationBar;
12navBar.HorizontalPanel.Children.Clear();
13navBar.VerticalPanel.Children.Clear();
14
15//添加自定义导航菜单项
16ChangeMapModeButtonbtnAerial=newChangeMapModeButton(newAerialMode(true),"卫星地图","点击导航到卫星地图");
17btnAerial.IsChecked=true;
18navBar.HorizontalPanel.Children.Add(btnAerial);
19
20ChangeMapModeButtonbtnRoad=newChangeMapModeButton(newRoadMode(),"路径地图","点击导航到路径地图");
21btnRoad.IsChecked=false;
22navBar.HorizontalPanel.Children.Add(btnRoad);
23
24//分割线
25navBar.HorizontalPanel.Children.Add(newCommandSeparator());
26
27CommandToggleButtonbtnCQ=newCommandToggleButton(newCustomCommand("重庆"),"重庆","地图定位到重庆");
28navBar.HorizontalPanel.Children.Add(btnCQ);
29};
30};
31}
32}
如上使用了自定义的CustomCommand给功能导航条上添加了“重庆”,当点击重庆的时候就会将地图动态定位到重庆的相应地图级别,如下预览图:
呵呵,大功告成了。Biing Maps Silverlight Control内部也提供了很多导航命令,比如用于放大/缩小地图级别的ZoomMapCommand、分割线命令ZoomMapCommand以及改变地图呈现模式的ChangeMapModeCommand等等。
分享到:
相关推荐
微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(完整案例),本示例主要讲述如何隐藏掉小程序顶部导航栏,然后设置自定义navigationBar,其中涉及组件用法、参数传递、导航栏相关等,简单点来说就是将...
自定义NavigationBar
前言 navigationBar相信大家都不陌生把?...window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式。 "window": { "navigationStyle": "custom" } 复制代码 让我们看看隐藏后
前段时间android项目中用到一个可以滑动的数量可变的导航栏,在网上也没找到合适的替代品,所以就自定义了个该控件,在此分享一下该控件,给有需要的人。
ios自定义tabbar和navigationbar
一种自定义 NavigationBar 的简单方法。 要求 iOS 8.0+ 斯威夫特 5.0 安装 可可豆 SwiftyNavigationBar 可通过。 要安装它,只需将以下行添加到您的 Podfile 中: pod 'SwiftyNavigationBar' Swift 包管理器 从 ...
自定义导航栏,自定义NavigationBar
使用方法 只有hud隐藏后,才会去创建新的hud,否则一直复用一个hud,至于那个- (void)showTitle:(NSString *)title navigationBar:(BOOL)hiden; 是为了自己项目里加,防止位置错乱 /** * 只带文字提示 * * @...
flutter_app_test_00003 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目,那么有一些资源可以帮助您入门: 要获得Flutter入门方面的帮助,请查看我们的,其中提供了...
前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是...// NavigationBar 导航条的自定义封装 // create by 小广 'use strict'; import React, { Component,Prop
wpf 导航条 自定义控件 ! NavigationBar
前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义...window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式。 window: { navigationStyle: custom }
自定义导航条,包括颜色、图片以及上面的按钮。在iOS5.0以上版本,要想navigation bar上面也能显示木质图片,要更改“WoodUINavigationAppDelegate.m”文件的一段代码:[navigationController.navigationBar ...
干脆直接干掉每个页面的 NavigationBar,在使用 UINavigationController 管理的同时,每个页面的 NavigationBar 都使用自定义的 UIView, 这样既定制程度高又可以在不需要 NavigationBar 的页面无缝对接,包括一些...
一个自定义的导航栏,只需要在使用的类中引入头文件就可以直接使用 但是要在AppDelegate中将nav设置为rootView self.navigation = [[UINavigationController alloc]initWithRootViewController:self....
大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ,但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。 思路 隐藏官方导航栏 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同...
AndroidP横屏项目,修改SystemUI下拉栏全屏显示,并覆盖NavigationBar导航栏之上,原博客 https://blog.csdn.net/shusuanly/article/details/115264404