文章目录
1、账号申请2、创建应用3、使用地图介绍示例4、具体使用控件个性地图带高度的点（标记地点、覆盖物）点击事件参考资料：入门百度地图 JavaScript API | 8月更文挑战 - 掘金 ()
今天在使用Echarts添加地图模块（精确到每个楼栋）遇阻塞，现将一些部分走通的小技巧分享给大家
先看一下简单的使用效果：
1、账号申请
先申请成为百度开发者（需要填写身份证信息、申请理由等），创建地图应用生成AK。
百度地图开放平台 | 百度地图API SDK | 地图开发 ()
一般会秒同意，所以不用担心时间问题
2、创建应用
注意
应用类型选择浏览器端。白名单输入*号，所有地址都可以访问。
3、使用地图
复制你的AK放入案例的示例代码即可看到效果
介绍
在页面使用script标签引入<script src="http://api./api?v=3.0&ak=您的密钥"></script><script src="http://api./api?type=webgl&v=1.0&ak=您的密钥"></script>
v: 地图api版本。type: 添加type=webgl，使用3D地图类型。ak: 刚才创建应用的ak值。百度地图 示例中心
示例
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>地图</title><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javascript" src="./test/jquery.min.js"></script><script src="http://api./api?type=webgl&v=1.0&ak=您的密钥"></script><style type="text/css">html {height: 100%;}body {height: 100%;margin: 0px;padding: 0px;}#container {height: 100%;}.bmap {height: 100%;width: 100%;}</style></head><body><!-- 百度地图--><div id="bmap" class="bmap"></div><script type="text/javascript">var map = new BMapGL.Map('bmap') // 创建Map实例map.centerAndZoom('上海市', 10) // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放</script></body></html>
效果展示：
4、具体使用
官网开发指南：jspopularGL | 百度地图API SDK ()
创建地图 展示地图变更地图类型添加控件个性化地图 覆盖物 绘制点、线、面带高度的点镂空面绘制3D棱柱绘制地面叠加层文本标注信息窗口交通流量图层 事件处理 地图事件右键菜单 动态效果 自定义视角动画轨迹动画 LBS服务 正/逆地址解析出行路线规划定位 图层服务 三方标准图层 类参考
下面挑几个常用的展示：
控件
控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。
就是在地图上层添加，对地图控制的组件。如放大、缩小、平移等。官方提供了很多定义好的控件，可以直接使用。当然我们也可以自定义控件（通过
DOM事件触发函数，在函数中调用地图api）。官网文档：jspopularGL | 百度地图API SDK ()
参考示例：
代码展示
var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件map.addControl(scaleCtrl)var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件map.addControl(zoomCtrl)var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件map.addControl(cityCtrl)
效果展示 到了这里就要提一句。百度地图左下角的图标，其实就是个img。要隐藏他只要找到样式名设置隐藏就行。这里不直接对.anchorBL隐藏是因为其他控件也使用了这个样式名。
// 图标.anchorBL img {display: none;}// 备案信息.BMap_cpyCtrl.anchorBL span {display: none !important;}
控制控件位置等操作操作查看官方文档
个性地图
创建个性化地图样式进入地图开放平台控制台页面，在我的地图中，创建一个地图样式：
编辑样式
点击创建的地图样式，进入样式编辑器，根据您的需求自由编辑地图样式：
发布样式并获取样式ID
完成编辑后，在我的地图或者编辑器中发布该地图样式，获取发布后生成的样式ID：
在JavaScript API中应用地图样式
将第三步中获取的样式ID作为setMapStyleV2方法的参数。(注意：发布的styleID需要与ak为同一个用户)
相关代码如下：
map.setMapStyleV2({styleId: '你的样式ID'});
效果展示：
带高度的点（标记地点、覆盖物）
Marker3d | 百度地图API SDK ()
简单理解就是在地图图层上层添加元素展示。在百度地图中覆盖物种类有很多，通过不同的覆盖物函数，在地图上添加不同的覆盖物如点、面、信息框等。后面会详细介绍下覆盖物。使用map.addOverlay()方法向地图添加覆盖物，使用map.removeOverlay()方法移除覆盖物。
拾取坐标系统 ()
示例代码：
// 创建位置点var point = new BMapGL.Point(121.52, 31.0)// 创建带高度的点var marker3d = new BMapGL.Marker3D(point, 8000, {size: 50,shape: BMAP_SHAPE_CIRCLE,fillColor: '#367cc2',fillOpacity: 0.6});// 将点添加到地图上:通过map.addoverlay()方法将创建的点覆盖物添加到地图上。map.addOverlay(marker3d);
效果展示 ：
点击事件
以刚才的带高度的点为例，如果我想通过点击标记点，弹出信息
JavaScript API | 百度地图API SDK ()
地图JS API示例 | 百度地图开放平台 ()
百度地图JSAPI 2.0类参考 ()
示例代码
// 创建信息窗口var opts = {width: 200,height: 100,title: '施工地点'};var infoWindow = new BMapGL.InfoWindow('地址：上海市 达令巷公园', opts);// 点标记添加点击事件marker3d.addEventListener('click', function () {map.openInfoWindow(infoWindow, point); // 开启信息窗口});
效果展示：
