标签：
本文主要是最近帮助好友研究JavaScript的百度地图API，同时显示到C# Winform界面。同时遇到了BMap未定义的错误（BMap is not defined）及解决方法。以前写过基于Android的百度地图，其实原理都差不多，希望文章对你有所帮助吧！
使用C# Winform显示百度地图主要包括两个步骤：
1.调用百度地图API，通过申请的密钥AK访问JavaScript版本地图；
2.再在C#中webBrowser浏览器控件中访问JS文件，显示地图到窗口。
百度官方文档：http://developer.baidu.com/map/jsmobile.htm
百度申请密钥：http://lbsyun.baidu.com/apiconsole/key
首先，申请密钥如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#golist {display: none;}
@media (max-device-width: 780px){#golist{display: block !important;}}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
<title>地图官网展示效果</title>
</head>
<body>
<a id="golist" href="../demolist.htm">返回demo列表页</a>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.ZoomControl()); //添加地图缩放控件
</script>通过Chrome浏览器打开a1_1.html如下图所示：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
//新添加命名空间
using System.Net;
using System.IO;
using System.Security.Permissions; //交互JS
namespace MapWinForms
{
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
//本地文件 MapWinForms\bin\Debug
string url = Application.StartupPath + "\\a1_1.html";
textBox1.Text = url;
string file = "file:///E:\\WinFormBaiduMap\\a1_1.html";
//屏蔽js相关错误
webBrowser1.ScriptErrorsSuppressed = true;
//导航显示本地HTML文件
webBrowser1.Navigate(url);
}
}
}运行结果如下图所示：
在使用C# WebBrowser控件显示百度地图时，通常会报错BMap未定义。
报错：BMap.Map("container") BMap未定义 BMap is not defined
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>官方解决方法（没有作用）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ui7X2CSu3ITjojARL4tILi5W1i9gkDVS"></script>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<title>百度地图API测试</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 创建Map实例
var pointA = new BMap.Point(113.92983, 22.509397); // 创建点坐标 地址 蛇口沃尔玛
var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城
map.centerAndZoom(pointA, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
//map.setCurrentCity("北京"); // 设置当前城市信息
/*
* 给地图添加监控 获取当前点击经纬度
map.addEventListener("click", function(e){
alert(e.point.lng + ", " + e.point.lat);
});
*/
addMarker(pointA, "蛇口沃尔玛", "地址：工业大道和东滨路交汇处<br/>电话：(0755)26816711"); // 创建标注1
addMarker(pointB, "海岸城购物中心", "地址：文心五路33号海岸城东座212号<br/>电话：(0755)86125888"); // 创建标注2
//开始测距
var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 }); //定义折线
map.addOverlay(polyline); //添加折线到地图上
polyline.addEventListener("click", function () { //监听标注事件
alert('从蛇口沃尔玛到海岸城购物中心的距离是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。'); //获取两点距离,保留小数点后两位
});
//获取驾车路线
//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });
//driving.search(pointA, pointB);
// 编写自定义函数,创建标注
function addMarker(point, a, b) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//map.removeOverlay(marker); // 将标注从地图中移除
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画
marker.addEventListener("click", function () { // 监听标注事件
var opts = { // 创建信息窗口
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: a // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow(b, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 打开信息窗口
//alert("marker的位置是" + p.lng + "," + p.lat);
});
}
</script>
运行结果如下图所示：
标签：
原文地址：http://blog.csdn.net/eastmount/article/details/51380996
