[WPF] 浏览百度地图并获取经纬度地址信息
项目中需要利用登记的区域和地址在百度地图上定位,并获取该地址的经纬度。
本次功能对我来说主要难点如下:
1、百度地图API的基本使用方法,请首选使用百度地图的JavaScript大众版(PS:之前使用WebAPI会导致WebBrowser浏览出现很多问题);
JavaScript大众版网址:http://developer.baidu.com/map/index.php?title=jspopular
2、WPF WebBrowser控件中的JavaScript与WPF的交互;
3、WPF WebBrowser中IE缓存问题,导致开发调试时间增加;
4、WPF WebBrowser中如何禁止JS报错弹窗提示;
项目可以到百度云盘下载:http://pan.baidu.com/s/1o6MHxSA
主要代码如下:
ViewBaiduMapByLoaction.cs代码
public partial class ViewBaiduMapByLoaction : Window
{
/// <summary>
/// IP地址
/// </summary>
public string IP
{// TODO : 设置IP(IIS)
get { return "192.168.1.215"; }
} /// <summary>
/// 端口
/// </summary>
public string Port
{// TODO : 设置端口(IIS)
get { return ""; }
} /// <summary>
/// 百度API Key (AK)
/// </summary>
public string BaiduAK
{
get { return "yRnTso4E6HW32nxqHEY82wXi"; }
} public BaiduMapByLoactionViewModel ViewModel; public ViewBaiduMapByLoaction()
{
InitializeComponent();
this.initUI();
this.initEvent();
} private void initUI()
{
this.ViewModel = new BaiduMapByLoactionViewModel();
this.DataContext = this.ViewModel;
} private void initEvent()
{
this.wbBaiduMap.LoadCompleted += new LoadCompletedEventHandler(webBrowser_LoadCompleted); // JavaScript 与 WPF 交互
this.wbBaiduMap.Navigated += (a, b) => { this.hideScriptErrors(this.wbBaiduMap, true); }; // 阻止JS报错弹窗(可以注释)
this.btnSearch.Click += this.btnSearch_Click;
this.btnGetAddressFromWeb.Click += this.btnGetAddressFromWeb_Click;
} /// <summary>
/// 阻止JS报错弹窗(建议不使用)
/// </summary>
/// <param name="wb"></param>
/// <param name="hide"></param>
private void hideScriptErrors(WebBrowser wb, bool hide)
{
var fiComWebBrowser = typeof(WebBrowser).GetField("_axIWebBrowser2", BindingFlags.Instance | BindingFlags.NonPublic);
if (fiComWebBrowser == null) return;
var objComWebBrowser = fiComWebBrowser.GetValue(wb);
if (objComWebBrowser == null)
{
wb.Loaded += (o, s) => hideScriptErrors(wb, hide); //In case we are to early
return;
}
objComWebBrowser.GetType().InvokeMember("Silent", BindingFlags.SetProperty, null, objComWebBrowser, new object[] { hide });
Cursor = Cursors.Arrow;
} private void btnSearch_Click(object sender, RoutedEventArgs e)
{
if (string.IsNullOrEmpty(this.ViewModel.CityOrProvince) && string.IsNullOrEmpty(this.ViewModel.Address))
{
MessageBox.Show("请输入城市 / 地址。。。", "错误");
return;
} try
{
Cursor = Cursors.Wait;
this.getGPSInfoByAddress();
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "错误");
}
} /// <summary>
/// 访问ASPX显示地图
/// </summary>
private void getGPSInfoByAddress()
{
try
{
// 清除IE缓存
foreach (string strFileName in Directory.GetFiles(Environment.GetFolderPath(Environment.SpecialFolder.Cookies)))
{
if (strFileName.ToLower().IndexOf("index.dat") == -) { File.Delete(strFileName); }
} string uri = string.Format("http://{0}:{1}/WebServer/ViewMapByAddress.aspx?{2}{3}{4}",
this.IP,
this.Port,
!string.IsNullOrEmpty(this.ViewModel.Address) ? string.Format("address={0}", this.ViewModel.Address) : string.Empty,
!string.IsNullOrEmpty(this.ViewModel.CityOrProvince) ? string.Format("&city={0}", this.ViewModel.CityOrProvince) : string.Empty,
!string.IsNullOrEmpty(this.BaiduAK) ? string.Format("&ak={0}", this.BaiduAK) : string.Empty
); this.wbBaiduMap.Navigate(uri);
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "错误");
}
} /// <summary>
/// Web控件 与 JavaScript交互
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void webBrowser_LoadCompleted(object sender, NavigationEventArgs e)
{
this.wbBaiduMap.ObjectForScripting = new JSCallback(this);
} /// <summary>
/// 从浏览器控件中复制经纬度信息到WPF界面中
/// JS 与 WPF 交互
/// </summary>
/// <param name="lng"></param>
/// <param name="lat"></param>
public void SetLongitudeAndLatitude(string lng, string lat)
{
this.ViewModel.Lng = lng;
this.ViewModel.Lat = lat;
} /// <summary>
/// WPF 与 JS 交互 获取浏览器控件中的值到WPF中
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void btnGetAddressFromWeb_Click(object sender, RoutedEventArgs e)
{
try
{
this.wbBaiduMap.InvokeScript("setAddress");
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "错误");
}
} } #region JSCallBack [ComVisible(true)]
public class JSCallback
{
private ViewBaiduMapByLoaction Main
{
get;
set;
} public JSCallback(ViewBaiduMapByLoaction main)
{
this.Main = main;
} public void SetLongitudeAndLatitude(string lng, string lat)
{
this.Main.SetLongitudeAndLatitude(lng, lat);
} public void SetAddress(string address)
{
if (!string.IsNullOrEmpty(address))
{
this.Main.ViewModel.AddressFromWeb = address;
}
}
} #endregion
ViewMapByAddress.aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMapByAddress.aspx.cs" Inherits="BaiduMap_DEMO.WebServer.ViewMapByAddress" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
} body {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
} #allmap {
height: 100%;
width: 100%;
} #r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yRnTso4E6HW32nxqHEY82wXi"></script>
<title>地址解析</title>
</head>
<body>
<div id="allmap">
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(0, 0); var geoPoint = new BMap.Point(0, 0);
var myZoomLevel = <%=ZoomLevel %>;
var addressString = ""; // map.centerAndZoom(point, myZoomLevel);
map.enableScrollWheelZoom(); // 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("<%=Address %>", function (_point) {
if (_point) {
geoPoint = _point;
map.centerAndZoom(geoPoint, myZoomLevel); // ******** 添加自定义控件 ********
// 定义一个控件类,即function
function ZoomControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
} // 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("获取经纬度"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "red"; // 绑定事件
div.onclick = function (e) {
setLongitudeAndLatitude();
} // 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
} // 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
// ******** End of 添加自定义控件 ******** // ******** 添加 BMap.Marker (红点) ********
addressString = "<%=Address %>";
var diyMarker = new BMap.Marker(_point);
diyMarker.setTitle("<%=Address %>"); var label = new BMap.Label("<%=Address %>"+ "(" + geoPoint.lng + ", " + geoPoint.lat + ")", { offset: new BMap.Size(20, -10) });
diyMarker.setLabel(label);
map.addOverlay(diyMarker);
// ******** End of 添加 BMap.Marker (红点) ******** } else {
alert("警告:您输入的街道没有解析到结果。");
geoPoint = "";
}
}, "<%=City %>"); // ******** 添加导航栏 ********
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_RIGHT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl); // ******** 单击地图事件 ********
map.addEventListener("click", function (e) {
map.clearOverlays();
var pt = e.point;
myGeo.getLocation(pt, function (rs) {
if (!!rs.addressComponents) {
var addComp = rs.addressComponents; // addressComponents 有多个属性 // 省(Province);市(City);区(District);街(Street);房号(StreetNumber)
geoPoint = pt;
var diyMarker = new BMap.Marker(pt); // 创建百度地图红点 addressString = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
diyMarker.setTitle(addressString); var label = new BMap.Label(addressString + "(" + geoPoint.lng + ", " + geoPoint.lat + ")", { offset: new BMap.Size(20, -10) }); // 创建标注,并设置标注位置
diyMarker.setLabel(label); map.addOverlay(diyMarker);
}
});
}); function setAddress() // 获取地址信息
{
if(!!addressString)
{
window.external.SetAddress(addressString);
}
else
{
alert("警告:请点击地图获取设置查询地点。");
}
} function setLongitudeAndLatitude() // 获取经纬度信息
{
if(!!geoPoint)
{
window.external.SetLongitudeAndLatitude(geoPoint.lng, geoPoint.lat);
}
else
{
alert("警告:请点击地图获取设置查询地点。");
}
} </script>
ViewMapByAddress.aspx.cs 代码如下:
public partial class ViewMapByAddress : System.Web.UI.Page
{
/// <summary>
/// 城市
/// </summary>
public string City { get; set; } /// <summary>
/// 地址
/// </summary>
public string Address { get; set; } /// <summary>
/// 百度地图缩放层级
/// </summary>
public int ZoomLevel { get; set; } protected void Page_Load(object sender, EventArgs e)
{
this.City = this.Request["city"];
this.Address = this.Request["address"]; this.ZoomLevel = ; if (string.IsNullOrEmpty(this.Address) && !string.IsNullOrEmpty(this.City))
{
this.Address = this.City;
this.ZoomLevel = ;
}
}
}
[WPF] 浏览百度地图并获取经纬度地址信息的更多相关文章
- 通过百度地图API获取经纬度以及两点间距离
package com.baidumap; import java.io.BufferedReader; import java.io.IOException; import java.io.Inpu ...
- vue项目使用百度地图API获取经纬度
一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...
- python实现百度地图API获取某地址的经纬度
申请百度API 1.打开网页 http://lbsyun.baidu.com/index.php?title=首页 选择功能与服务中的地图,点击左边的获取密匙,然后按照要求申请即可,需要手机和百度账号 ...
- html5移动端根据百度地图api获取详细地址
<script type="text/javascript" src="js/BMap.js" ></script> <scrip ...
- JS通过百度地图API获取当前定位信息
$(function(){ var latlon=null; //ajax获取用户所在经纬度 $.ajax({ url:"http://api.map.baidu.com/location/ ...
- Python 读取照片的信息:拍摄时间、拍摄设备、经纬度等,以及根据经纬度通过百度地图API获取位置
通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...
- java 基于百度地图API GPS经纬度解析地址
首先这是百度地图api 的接口地址,基于接口的参数,不过多介绍,其中都提供相应的介绍: http://lbsyun.baidu.com/index.php?title=webapi/guide/web ...
- WPF嵌入百度地图完整实现
无论是做App还是web开发,很多都会用到地图功能,一般都会调用第三方的API实现地图功能!而正如国内的地图API提供方,基本上对Android.IOS和web开发提供了很完整的一套API,但是对于桌 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
随机推荐
- Tiny6410之控制icache驱动
什么是cache: 基于程序访问的局限性,在主存和CPU通用寄存器之间设置了一类高速的.容量较小的存储器,把正在执行的指令地址附件的一部分指令或数据从主存调入这类存储器,供CPU 在一段时间内使 ...
- Mac下如何使用Vim
帖子是转载的,原帖地址 Mac OX其实已经默认装好了vim了.不需要再安装Macvim https://ruby-china.org/topics/4905 Mac开发利器之程序员编辑器MacVim ...
- Date对象 识记
1.Date 对象创建 var myDate=new Date() 2.Date 对象属性 constructor pototype 3.Date 对象方法 Date() ...
- python多进程,以及进程池并发
模拟多进程 #!/usr/bin/env python#-*- coding:utf-8 -*-import timefrom multiprocessing import Process def s ...
- TI公司与MSP430单片机
美国德州仪器(Texas Instruments)公司,简称TI,是全球领先的半导体公司,成立于1930 年,成立之初是一家使用地震信号处理技术勘探原油的地质勘探公司,1951年更名为德州仪器公司,1 ...
- DOM对象和JQuery有什么不同的地方?
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- openstack私有云布署实践【12.1 网络Neutron-controller节点配置(科兴环境)】
网络这一块推荐使用的是 Neutron--LinuxBirdge的Ha高可用,此高可用方案对Public作用不是很大,Public只用到DHCP,而Private则会用到L3 Agent,则此方案是有 ...
- linux下svn目录管理
linux 下安装的svn目录文件: /data/svndata/winne/conf/passwd 是配置用户密码的文件路径
- 【界面优化】使用viewpagerindicator添加下划线滑动动画
开源代码viewpagerindicator里面没有实现tab下划线切换过程中的移动动画,都是很突兀的多个fragement之间的切换,导致用户体验略差,google了下相关问题,发现一片博文: ht ...
- DPDK l2fwd 浅注
l2fwd是DPDK中的非常经典的例子.二层转发模型. 就是在相邻的网卡接口间互相传递报文. 网口0和网口1之间报文互传. 网口2和网口3之间报文互传. ............ 运行参数 . 在目录 ...