目前,越来越多的项目涉及到地图的使用,现在来梳理下地图api的相关功能
1.使用,你要先申请下百度api的秘钥
2.在vue的使用有两种方法,第一种是引入script标签,第二种是在模块里面下载
npm install vue-baidu-map -s ,然后在main.js里面引入,像这样
Vue.use(BaiduMap,{
ak:'输入你的秘钥'
})
然后在页面上就可以直接使用组件啦。
3.我们在地图上不管是 打点还是划线,首先第一步要加载出百度地图
var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
这主要是用来加载地图级别,与地图的中心点。
4.下面我们就可以按照需求打点啦。
打点分两个情况,一是显示某些点,一般小于100的点,可以用marker标注, 点过多,一般采用海量点的模式,这里曾经踩过坑,在需求没明确,有多少点时,采用的是marker打点,但是后台返回上万个点时,这种标记方法直接导致公司的烂电脑cpu被占满,因此这种情况只有使用海量点进行标注。
5.marker打点
var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(ma