直接上代码:
后台:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Security.Permissions;
using System.Text;
using System.Windows.Forms;
namespace WebBrowserTest
{
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]//调用JS代码必要
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
//var browserVersion = webBrowser1.Version;
//var browserVersionMajor = webBrowser1.Version.Major;
//var uri = "file:///E:\\桌面文件夹\\BaiduMap_Demo.htm";
//webBrowser1.Navigate(uri);
//webBrowser1.ObjectForScripting = this;
try
{
//string str_url = Application.StartupPath + "../HTMLPage1.html";// 添加自己添加的html文件名,注意使用相对路径的方法 HTMLPage1.html要复制到debug目录下
string str_url = "file:///E:\\桌面文件夹\\BaiduMap_Demo.htm";
txt_url.Text = str_url;
Uri uri = new Uri(str_url);
webBrowser1.Url = uri;
//webBrowser1.ObjectForScripting = this;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "异常", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
}
private void btn_jump_Click(object sender, EventArgs e)
{
//本地文件 MapWinForms\bin\Debug
string url = "file:///E:\\桌面文件夹\\BaiduMap_Demo.htm"; //Application.StartupPath + "\\HTMLPage1.html";
//txt_url.Text = url;
url = txt_url.Text.ToString();
//string file = "file:///E:\\WinFormBaiduMap\\a1_1.html";
//屏蔽js相关错误
webBrowser1.ScriptErrorsSuppressed = true;
//导航显示本地HTML文件
webBrowser1.Navigate(url);
}
}
}
内嵌的Html:
<!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="http://api.map.baidu.com/api?v=2.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>
Html代码使用浏览器(Edge、Chrome、IE)打开都正常
但使用WebBrowser控件加载就显示不出地图
但鼠标放在地图中间位置能弹出tip,显示“天安门”
感觉地图是加载了的,但被遮罩挡住了……
接着各种搜索解决办法:
是否有报错,但嵌入的网页无法调试JavaScript,于是找WebBrowser控件调试JavaScript的方法……看到太麻烦便没有继续往下试
搜索WebBrowser控件无法显示地图,也没搜索到有效的
感觉方向应该不对……
最后去官网百度地图开放平台JavaScript API (https://lbsyun.baidu.com/index.php)看了下
最新的是JavaScript API GL v1.0,旧的也是JavaScript API 3.0,没有发现2.0的。是否2.0及更低版本不支持了呢?
于是将html中引入api的 由原来的2.0改成3.0试试
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥"></script>
果然WebBrowser显示地图正常了
个人推测应该是百度地图不支持2.0以下导致的
----------------------------------------------------------------
总结一下这次:
1、尽可能将项目的问题复现到测试Demo中,即建一个测试的项目来复现问题;
2、并且设置的方便调试,比如这个弄了一个TextBox可输入URL访问,当时测试http://map.baidu.com是能正常显示的,所以网络并没有拦截百度地图的情况;
3、尽量往问题简单的方面找解决办法