参考资料: 入门百度地图 JavaScript API | 8月更文挑战 - 掘金 (juejin.cn)
今天在使用Echarts添加地图模块(精确到每个楼栋)遇阻塞,现将一些部分走通的小技巧分享给大家
先看一下简单的使用效果:
1、账号申请
先申请成为百度开发者(需要填写身份证信息、申请理由等),创建地图应用生成 AK。
一般会秒同意,所以不用担心时间问题
2、创建应用
注意
- 应用类型选择浏览器端。
- 白名单输入
*
号,所有地址都可以访问。
3、使用地图
复制你的AK放入案例的示例代码即可看到效果
介绍
- 在页面使用
script
标签引入
<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script src="http://api.map.baidu.com/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.map.baidu.com/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、具体使用
下面挑几个常用的展示:
控件
控件是负责与地图交互的UI元素,百度地图API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
就是在地图上层添加,对地图控制的组件。如放大、缩小、平移等。官方提供了很多定义好的控件,可以直接使用。当然我们也可以自定义控件(通过
DOM事件
触发函数,在函数中调用地图api
)。
控件 | 类名 | 简介 |
---|---|---|
抽象基类 | Control | 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件 |
比例尺 | ScaleControl | 默认位于地图左下方,显示地图的比例关系 |
缩放 | ZoomControl | 默认位于地图右下方,控制地图级别的缩放 |
定位 | LocationControl | 默认位于地图左下方,用于获取定位 |
城市选择列表 | CityListControl | 默认位于地图左上方,用于进行城市选择定位 |
版权 | CopyrightControl | 默认位于地图左下方,用于展示版权信息 |
参考示例:
- 代码展示
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 (baidu.com)
- 简单理解就是在地图图层上层添加
元素展示
。在百度地图中覆盖物种类有很多,通过不同的覆盖物函数,在地图上添加不同的覆盖物如点、面、信息框等。后面会详细介绍下覆盖物。 - 使用
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 (baidu.com)
地图JS API示例 | 百度地图开放平台 (baidu.com)
- 示例代码
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '施工地点'
};
var infoWindow = new BMapGL.InfoWindow('地址:上海市 达令巷公园', opts);
// 点标记添加点击事件
marker3d.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
效果展示: