百度地图api的使用

目前,越来越多的项目涉及到地图的使用,现在来梳理下地图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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值