vue3如何引入百度地图

百度地图api地址 JavaScript API - 信息窗口 | 百度地图API SDK

1.首先在index.html中引入百度js,ak则为密钥,密钥获取地址: JavaScript API - 账号和获取密钥 | 百度地图API SDK

 2.创建一个vue文件

 3.创建全局变量,因为我这个是单独得文件不是子组件,所以是全局变量,如果是子组件需要被多个组件引用则需要在data中创建。也可以直接在data中定义不定义为全局变量也可以。

data中定义使用,这个是vue2版本得,vue3直接按3定义即可。

4.初始化map

以上就可以直接展示地图了,这个是pc端得引入方式。

如果是移动端则是另外得引入方式,如下:

1.创建一个map.js文件

 2.map.vue文件中html的展示方式与pc端相同,移动端只需要改动一下引入map.js, mounted中mymap函数中为ak,填入密钥即可。

 都引入成功后百度地图就可以正常展示了。

如果想给地图上加标记点可以使用maker,只需要标记点的经纬度即可

标记点也可以监听点击事件。

也可以添加label,label样式可以通过setStyle修改

 有别的需要加的东西可以在api中查找

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值