C# WPF Bing地图展示

原文:C# WPF Bing地图展示

微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言；

如果您觉得Dotnet9对您有帮助，欢迎赞赏

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

1.实现效果

Bing地图展示界面

2.业务场景

Bing地图控件的使用

3.编码实现

3.1 添加Nuget库

站长使用 .Net Core 3.1 创建的WPF工程，创建“BingMap”解决方案后，需要添加三个Nuget库：MaterialDesignThemes、MaterialDesignColors和Bing WPF地图控件Microsoft.Maps.MapControl.WPF，其中Bing地图控件是.net framework 4.6.1版本，所以项目使用framework版本要好点，其实影响也不大。

MaterialDesign控件库

Bing WPF地图控件Microsoft.Maps.MapControl.WPF

注意

使用bing map地图控件需要注册开发者账号，站长只是按视频教程敲的代码，VS 2019设计器能正常加载地图，但运行时会有提示请注册开发者账号，否则地图无法正常显示

需要注册Bing地图开发者账号

3.2 工程结构

不需要截图，只修改了两个文件，App.xaml添加MD控件样式，MainWindow主窗口实现效果。

3.3 App.xaml引入MD控件样式

<Application x:Class="BingMap.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:BingMap"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3.4 主窗体 MainWindow.xaml

加载Bing地图控件，设置地图属性等：

<Window x:Class="BingMap.MainWindow"
        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"
        xmlns:local="clr-namespace:BingMap"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
        Title="Bing地图" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize"
        WindowStartupLocation="CenterScreen" Background="#FF3A3A3A">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="1" Margin="10">
            <Grid>
                <TextBox Background="White" Padding="10 0 25 0"/>
                <materialDesign:PackIcon Kind="MapMarker" VerticalAlignment="Center" Margin="2"/>
                <Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
                    <materialDesign:PackIcon Kind="Search"/>
                </Button>
            </Grid>
            <ListView>
                <ListViewItem>
                    <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
                        <Grid>
                            <StackPanel Height="50">
                                <TextBlock Text="鸡腿"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                </StackPanel>
                                <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
                            </StackPanel>
                            <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
                        </Grid>
                    </Border>
                </ListViewItem>
                <ListViewItem>
                    <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
                        <Grid>
                            <StackPanel Height="50">
                                <TextBlock Text="La Casita Grill"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                </StackPanel>
                                <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
                            </StackPanel>
                            <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
                        </Grid>
                    </Border>
                </ListViewItem>
                <ListViewItem>
                    <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
                        <Grid>
                            <StackPanel Height="50">
                                <TextBlock Text="La Casita Grill"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                </StackPanel>
                                <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
                            </StackPanel>
                            <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
                        </Grid>
                    </Border>

                </ListViewItem>
                <ListViewItem>
                    <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
                        <Grid>
                            <StackPanel Height="50">
                                <TextBlock Text="La Casita Grill"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                    <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
                                </StackPanel>
                                <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
                            </StackPanel>
                            <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
                        </Grid>
                    </Border>
                </ListViewItem>
            </ListView>
        </StackPanel>

        <Button Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
            <materialDesign:PackIcon Kind="Close"/>
        </Button>

        <m:Map Mode="Road" Grid.Column="1" Grid.Row="1" ZoomLevel="16" Center="-23.1870304,-50.6606103">
            <Canvas
                m:MapLayer.Position="-23.1870304,-50.6606103"
                m:MapLayer.PositionOrigin="BottomCenter" Width="30" Height="30">
                <materialDesign:PackIcon Kind="MapMarker" Width="30" Height="30" Foreground="#FF3C3C3C"/>
            </Canvas>
        </m:Map>
    </Grid>
</Window>

4.本文参考

Design com WPF 大神的学习视频：Bing Maps

开源控件库：MaterialDesignInXamlToolkit

本站对MD开源控件库的介绍：控件介绍

5.代码下载

文中代码已经全部给出。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/6814.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

原文地址：https://www.cnblogs.com/lonelyxmas/p/12147172.html

时间： 2024-08-30 09:50:21

C# WPF Bing地图展示的相关文章

Android 开发之集成百度地图的定位与地图展示

app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,最近也在做定位功能,但是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了很长时间来研究,今天来给大家分享下 Android 集成百度地图要注意的事情,这里只是集成了定位和地图展示功能,其他功能还未涉及,先看下效果图: 接下来介绍一下 Android 集成百度地图的步骤: 首先登陆百度开发平台,在我的应用中创建应用,然后你会看到如下界面: 根据它的要求填写相关信息,这里的安全是有 SHA

LBS数据分析：使用地图展示统计数据——麻点图与麻数图

作为一个LBS的APP,都获得了用户经纬度,也都使用了友盟统计.google ana等等统计分析系统,不过没有地图展示功能,不能进行直观的展示. 友盟统计.google ana等系统是总体数据统计,无法和业务结合起来,比如淘宝提供每个店.每个商品的用户统计. 当有上述需求时,就需要自己服务器保存一份经纬度,进行统计,这时候如何直观的展示? 查看各个地图开放平台的文档,发现有的提供了“麻点图/点聚合(Marker Cluster)”功能. 原理是:把每个点都画在地图上,缩放时累加聚合. 缺点:只能

【智能手环APP for Android 】01 百度地图展示行动轨迹

1.效果图示 2.行动轨迹数据 <span style="font-size:18px;">[ { "LocationX":"121.42619", "LocationY":"31.186655" }, { "LocationX":"121.42694", "LocationY":"31.187215" }, { &

CoreLocation地理定位 Map Kit 地图展示

在这里总结一下关于地图定位的知识.CoreLocaton,Map Kit. 在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院 在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能,必须基于2个框架进行开发 Map Kit :用于地图展示 Core Location :用于地理定位 2个热门专业术语 LBS :Location Based Service SoLoMo :Social Local Mobi

silverlight调用bing地图

bing地图sdk: https://msdn.microsoft.com/en-us/library/ff428643.aspx 引用dll:https://www.microsoft.com/en-us/download/details.aspx?id=2949 (安装软件) 简单入门:http://pietschsoft.com/post/2009/11/12/Getting_Started_Bing_Maps_Silverlight_Control_Version_1_RTW 开发sdk

西安电子地图下载 来自谷歌电子地图库 地图展示15、17、19级

西安电子地图下载 来自谷歌电子地图库 地图展示15.17.19级 一般来说商业用图几乎相同就是17级左右,提供的下载全然满足大多数人浏览使用,假设用于旅行外出当然级数越高越好,假设是驴行,那就更有必要下载完整的地图以作不时之需. 百度网盘下载资源:http://pan.baidu.com/s/1gdteIhP 谷歌电子地图下载器:http://www.arceyes.com/download/sggm.rar 百度电子地图下载器:http://www.arceyes.com/download/s

Demo:地图展示，定位，地理编码，标注，离线地图等

Demo:地图展示,定位,地理编码,标注,离线地图等 简单的实现天地图部分功能,地图展示,定位,地理编码,标注,公交和驾车规划,离线地图等功能,简单明了. 下载地址:http://www.devstore.cn/code/info/81.html 运行截图:    

基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 展示效果如下: 2. 地图瓦片下载工具及配置 工具下载链接: http://pan.baidu.com/s/1qYoHj4K 密码: ehgh 工具使用方法: 数据库配置 打开工具目录中的 MapDownloader.exe.config 文件.根据实际情况填写如图中的配置信息. 地图瓦片图下载

openlayers入门开发系列之地图展示篇

GIS之家一直打算写一个openlayers入门开发系列文章(openlayers目前版本用4.x),只是一直没抽出时间来整理:本文是openlayers入门开发系列的第一篇:地图展示篇,后续会持续更新一系列入门开发文章. 整个系列的系统主界面会随着功能增加而对应改变,大体布局如下: 详细的实现过程见:这里 原文地址:https://www.cnblogs.com/giserhome/p/9425156.html