百度地图api入门

高德地图同理

申请ak

  1. 百度地图api
  2. 然后去控制台咯
  3. 应用管理
  4. 我的应用
  5. 创建
  6. 选择浏览器端
  7. 看人家写的字妈的

整合vue

  1. index.html中加入<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=mabprYrnx9ibaol35dSI7eGqGGLR3A2H"></script>注意是getscript不是api
  2. 加入div设置id为[id]
  3. 方法放入onMounted中
  4. 记得设置格式不然成长条了

api

这东西还是不要用ts了，满屏幕红吓死了

大多数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 创建map
const map = new BMapGL.Map('map');
// 创建标点
const point = new BMapGL.Point(116.404, 39.915);
// 设置中心点和放大倍数
map.centerAndZoom(point, 9);
// 允许滚轮缩放
map.enableScrollWheelZoom(true);
// 3d视图（加个角度咯）
map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(73);       //设置地图的倾斜角度
// 标记，标点
map.addOverlay(new BMap.Marker(point));
// 跳转
map.panTo(point);

少数

1
2
3
4
5
6
7
8
// 设置地图类型为地球模式
map.setMapType(BMAP_EARTH_MAP);
1.标准地图：BMAP_NORMAL_MAP
2.地球模式：BMAP_EARTH_MAP
3.普通卫星地图：BMAP_SATELLITE_MAP
// 添加控件
// 个性化制图
// 。。。

问题

报错

A parser-blocking, cross site (i.e. different eTLD+1) script

把script中的api改成getScript

和官网不一致

仔细读文档啊铁咩

scipt是1.0版本外加type=webgl

然后就可以按照官网的写BMapGL了