C#使用WebBrowser引入百度地图

举报
Andy阿辉 发表于 2022/02/25 23:32:38 2022/02/25
【摘要】 欢迎您成为我的读者,希望这篇文章能给你一些帮助。 前言今天有空和大家一起研究研究在WinForm端如何使用百度地图公开的信息利用WebBrowser组件来加载显示出地图。首先仔细阅读百度地图的SDK信息,未提供在C#端的SDK信息,那么只能通过在WebBrowser中是通过加载网页html的形式来显示的。此时用到的百度地图JavaScript API v3.0,地址如下:https://lb...

欢迎您成为我的读者,希望这篇文章能给你一些帮助。

前言

今天有空和大家一起研究研究在WinForm端如何使用百度地图公开的信息利用WebBrowser组件来加载显示出地图。

首先仔细阅读百度地图的SDK信息,未提供在C#端的SDK信息,那么只能通过在WebBrowser中是通过加载网页html的形式来显示的。

此时用到的百度地图JavaScript API v3.0,地址如下:

https://lbsyun.baidu.com/index.php?title=jspopular3.0

百度地图SDK

根据公开的SDK信息仔细阅读,基本写的很清楚。具体步骤如下所示:

1、先申请百度地图的密钥。

2、准备移动端页面(静态页面被C#的WebBrowser组件调用)。

3、配置其百度地图属性。

4、传入地图中心点的经纬度信息,加载显示地图

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=密钥">
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
// 创建地图实例 
var map = new BMap.Map("container");
// 创建点坐标  
var point = new BMap.Point(116.404, 39.915);
// 初始化地图,设置中心点坐标和地图级别  
map.centerAndZoom(point, 15);
</script>
</body>
</html>

WebBrowser组件

对于在C#的WinForm端,需要利用WebBrowser组件来嵌套显示此静态页面。

具体步骤如下:

1、先新建HTML的静态页面,如上面代码一样。

2、在C#代码中利用WebBrowser调用其静态页面。

3、利用调用方法,可在WebBrowser和html页面间实现双向调用。

4、根据具体的经纬度信息在百度地图中显示出具体的坐标信息。

具体代码如下所示:

// 防止 WebBrowser 控件打开拖放到其上的文件。
wb.AllowWebBrowserDrop = false;
// 防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
wb.IsWebBrowserContextMenuEnabled = false;
// 以防止 WebBrowser 控件响应快捷键。
wb.WebBrowserShortcutsEnabled = false;
// 以防止 WebBrowser 控件显示脚本代码问题的错误信息。    
wb.ScriptErrorsSuppressed = true;
// 这个属性比较重要,可以通过这个属性,把后台代码中的数据,传递到JS中,供内嵌的网页使用
wb.ObjectForScripting = this;

// 设置WebBrower的Url
string url = string.Format(Application.StartupPath + "/Baidu.html");
wb.Url = new Uri(url);


//WebBrower调用网页
wb.Document.InvokeScript("updateBaidu");
//网页调用C# 方法
window.external.getData();

这里大概的知识点就这么多,大家可以实际上手操作一遍,大概就知道是咋么回事了。

寄语

人生短暂,我不想去追求自己看不见的,我只想抓住我能看得见的。

原创不易,给个关注。

我是阿辉,感谢您的阅读,如果对你有帮助,麻烦点赞、转发 谢谢。

很高兴能和您成为朋友。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。