素材巴巴 > 程序开发 >

vue3中使用百度地图

程序开发 2023-09-21 11:33:37

一、注册百度地图账号,成为开发者

1、打开百度地图开放平台,点击开放文档中的JavaScript API

在这里插入图片描述
2、.通过百度账号注册成为百度地图开放平台开发者,选择开发者类型(个人/企业),完成开发者认证即可
在这里插入图片描述

二、申请密钥AK

JavaScript API只支持浏览端的AK进行接入与访问,请开发者在申请AK时注意选择正确的AK类型
1.进入百度地图开放平台官网控制台,点击**【应用管理】-【我的应用】
在这里插入图片描述
2、点击【创建应用】进入AK申请页面,填写应用名称,务必选择AK类型为“浏览器端”,JS API只支持浏览器端AK进行请求与访问
在这里插入图片描述
3、为了防止您的AK被盗用,请您务必配置refer白名单,只有该白名单中的网站才能成功发起调用。如下方示例所示,配置了*.mysite.com*为域名白名单,即代表域名中包含.mysite.com的网站=才可以使用该AK访问JS API的服务
在这里插入图片描述

三、在vue3.0中使用百度地图API

注:本人使用的是vite构建的vue3,使用的是setup语法糖
1、首先在跟路径下index.html中引入
在这里插入图片描述

2、在组件中使用


 

3、样式展示
在这里插入图片描述


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。