Vue如何接入百度地图

2022-11-24 0 645

Vue如何接入百度地图

#Vue2#

后端工程项目有时须要网络连接腾讯世界地图,网络连接腾讯世界地图的大前提是要登入腾讯帐号提出申请正式成为开发人员后接着提出申请公钥,提出申请公钥镜像:https://lbsyun.baidu.com/apiconsole/user。提出申请完公钥提过留存,那个在工程项目中初始化腾讯世界地图api须要加进的。网络连接腾讯世界地图API,主要就有三种形式:一类是JavaScript API,除此之外一类是腾讯世界地图非官方PCB好的Vue版模块

形式一:网络连接百度世界地图JavaScript API

腾讯世界地图JavaScript API门牌号:http://lbsyun.baidu.com/index.php?title=jspopular

此种形式是透过JavaScript形式初始化腾讯世界地图的js库接着图形到选定id原素

在子目录的index.html加进下列标识符导入:

v=2.0则表示版,腾讯世界地图JavaScript API有2.0和3.0版,相同版机能略有差异,这儿采用2.0版标识符中的YOURAPPKEY要代替为你提出申请腾讯世界地图的公钥callback:反弹初始化世界地图的形式接下去PCB两个腾讯世界地图模块map.vue,方便快捷生物降解。下面依次如是说Vue 2和Vue 3读法:

Vue 2:

Vue如何接入百度地图

下面标识符中世界地图的增设标识符能依照对个人具体内容需求增改

Vue 3:

Vue如何接入百度地图

形式二:网络连接腾讯世界地图非官方的Vue版模块

腾讯世界地图非官方的Vue版模块门牌号:https://github.com/Dafrok/vue-baidu-map

1.安装依赖:(下列三种形式二选一)

npm i –save vue-baidu-map

yarn add vue-baidu-map

2.在main.js或main.ts全局注册该模块

Vue 2和Vue 3版注册模块有区别,要注意。

下列标识符中的YOURAPPKEY要代替为你提出申请腾讯世界地图的公钥

Vue 2:

Vue如何接入百度地图

Vue 3:

Vue如何接入百度地图

3.在Vue页面中采用:

Vue如何接入百度地图

注意:一定要增设腾讯世界地图模块div的宽和高,否则不会生效

该模块能支持传参定制世界地图,具体内容的参数能到非官方文档查看:https://dafrok.github.io/vue-baidu-map/#/zh/index

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务