Vue项目使用百度地图api

1.百度开发者认证

2.创建应用

3.引用百度地图API文件

4.展示地图

1.百度开发者认证

进入百度地图开放平台官网，（认证需要身份证号码，人脸识别，手机百度APP，邮箱地址）

注册登录完成，在控制台可以进行开发者认证。

2.创建应用

在应用管理中可以创建应用，应用类型需要选择浏览器端，Referer白名单如果只是测试版本，可以先使用*，只有该白名单中的网站才能成功发起调用。

创建完成就会生成一个AK。

3.引用百度地图API文件

在JavaScript开放文档中有教程，可以根据教程来引用。

如果我们要在vue中使用，我们需要将这代码段放到html文件中。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密钥">
</script>

需要修改里面的ak值，就是上面创建应用生成的ak值。

4.展示地图

展示地图也有一个demo可供学习。

如果在vue中的index.html中引入api之后，在项目中就可以使用了。

var map = new BMapGL.Map("container");          // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

这是使用的案例，有几个需要注意的事项：

要把这段代码放到Mounted生命周期里面；
要拿到展示地图的那个实例，可以用ref拿到；
设置展示地图的实例的宽高；
创建点坐标可以修改。

至此，简单使用百度地图API已经完成了。

Vue项目使用百度地图api相关推荐

vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
【vue+百度地图】vue项目使用百度地图API（普通展示）
方法来自大神[超华] 1.进入百度API 操作官网:https://lbsyun.baidu.com 根据官网流程: 登录自己的百度账号-> 申请然后点击邮箱内获取的新链接-> 填写自己需 ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
react项目使用百度地图API
文章目录前言一.接入API 1.登录百度地图 2.创建应用,获取密钥 3.引入API 4.当作模块导入BMap 二.使用 1.引入 2.展示地图三.效果展示总结前言最近在开发一款react ...
vue项目调用百度地图定位，判断当前位置是否在目标位置范围内
之前用vue做了一个百度地图定位功能,判断是否当前位置在目标位置范围内的小功能,类似这样: 直接上代码百度地图定位,设置目标位置范围,判断当前位置到目标位置的距离,BDMap.vue <tem ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
vue项目使用百度地图
一. 前往百度地图API平台获取ak 二.安装vue-baidu-map (这里推荐npm安装) 三.引入vue-baidu-map.js,(我这里是全局引入的).在main.js中导入 import ...

Vue项目使用百度地图api

1.百度开发者认证

2.创建应用

3.引用百度地图API文件

4.展示地图

Vue项目使用百度地图api相关推荐

最新文章

热门文章