一、初识
1、获取开发者key
获取百度开发者AK的官方教程
获取之后可以去控制台查看自己的开发者Key
控制台--->应用管理
--->我的应用
即可查看到自己的开发者key
2、api地址
(1)、百度1.0api地址
百度地图JSAPI WebGL v1.0类参考
(2)、百度2.0api地址
(3)、百度3.0api地址
(4)、坐标拾取器
3、示例
(1)、直接引入
地图示例
Hello, World
服务端代码
var express = require('express');
var app = express();
app.use(express.static('static'));
app.listen(5000);
console.log('服务器启动: 5000');
注意,如果本地静态页直接访问百度api会报一个跨域错误,如果把该文件作为静态资源放到服务器返回则不会报错。
隐藏左下角百度地图logo
左下角百度地图logo
添加对应样式即可,类名必须和Logo容器元素类名一致。
.anchorBL{
display:none;
}
抹掉了百度地图logo
(2)、异步加载
意思是不让地图的加载影响主进程的渲染,当页面所有资源全部加载完成后再加载百度地图
Hello, World
(3)、3D地图
效果:
3D地图
Hello, World
(4)、控件
缩放
右上角缩放
Hello, World
常量 | 位置 |
---|---|
BMAP_ANCHOR_TOP_RIGHT | 右上 |
BMAP_ANCHOR_TOP_LEFT | 左上 |
BMAP_ANCHOR_BOTTOM_RIGHT | 右下 |
BMAP_ANCHOR_BOTTOM_LEFT | 左上 |
当该控件在左下角的时候,不能正常显示,是因为使用了.anchorBL类将百度地图Logo等隐藏了,补救措施如下:
.anchorBL{
display:none;
}
.BMap_stdMpZoom {
display:block;
}
(5)、绘制图标
图标
Hello, World
(6)、绘制线
绘制线
Hello, World
线的更多属性
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399,39.800),
new BMapGL.Point(116.405,39.820),
new BMapGL.Point(117.200,40.822)
],{
strokeColor:'red',
strokeWeight:4,
strokeOpacity:0.5
})
map.addOverlay(polyline);
(7)、绘制多边形
多边形
Hello, World
(8)、绘制文本框
文本框
Hello, World
(9)、绘制信息框
信息框
Hello, World
(10)、调整提示框位置
Hello, World
(11)、自定义信息框
Hello, World
(12)、动画viewanimation
动画
Hello, World
(13)轨迹动画
库文件地址
轨迹动画
Hello, World
(14)、散点图
散点图
Hello, World
(15)、飞线动画
贝塞尔曲线官网api地址
飞线图层官网
飞线动画
Hello, World
(16)、酷炫飞线动画
官网案例
mapv版
酷炫飞线动画
mapvgl版
简单版万剑归宗!
Hello, World
边绑定
mapvgl官方文档
知乎专栏边绑定
边合并
Hello, World
17、3D城市地图
立体覆盖物
坐标转换
3d城市地图
Hello, World
自定义地图样式
官网链接
步骤:
1、点击“地图模板”设置一个自定义样式
2、将该样式发布,得到一个id
3、
map.setMapStyleV2({//设置个性化样式
styleId:'5b0df1ed4f334469f88c4bf6edd992fc'
})