当前位置: 首页 > news >正文

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);                 // 初始化地图,设置中心点坐标和地图级别

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

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

 

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

相关文章:

  • RabbitMQ--基础--02--原理
  • 网页设计与开发-实验报告-1
  • 电阻应变式力传感器
  • 深度学习数据集最常见的6大问题
  • 打开算法之门,算法学习瓶颈、学习方法
  • Mybatis的事务管理机制。
  • 微信小程序通过字典表匹配对应数据
  • 嵌入式系统开发笔记102:DEV C++的使用
  • 37.(前端)菜单的展示
  • 计算机的硬件(计算机组成原理)
  • Linux权限理解
  • 注册商标的重要性
  • 65.【Study_kuang 多线程】
  • 【JavaScript】事件高级
  • STM32使用PWM+DMA方式驱动WS2812灯珠
  • 【知识碎片】第三方登录弹窗效果
  • django开发-定时任务的使用
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • Python十分钟制作属于你自己的个性logo
  • REST架构的思考
  • 后端_ThinkPHP5
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 经典排序算法及其 Java 实现
  • 聊聊flink的TableFactory
  • 聊聊redis的数据结构的应用
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 手写一个CommonJS打包工具(一)
  • 协程
  • 看到一个关于网页设计的文章分享过来!大家看看!
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • # include “ “ 和 # include < >两者的区别
  • #多叉树深度遍历_结合深度学习的视频编码方法--帧内预测
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (160)时序收敛--->(10)时序收敛十
  • (附源码)springboot建达集团公司平台 毕业设计 141538
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (简单) HDU 2612 Find a way,BFS。
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (南京观海微电子)——示波器使用介绍
  • (四)汇编语言——简单程序
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • (转)IOS中获取各种文件的目录路径的方法
  • (转载)PyTorch代码规范最佳实践和样式指南
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • ******IT公司面试题汇总+优秀技术博客汇总
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • *算法训练(leetcode)第四十七天 | 并查集理论基础、107. 寻找存在的路径
  • .net core 6 集成和使用 mongodb
  • .NET 程序如何获取图片的宽高(框架自带多种方法的不同性能)
  • .Net中的设计模式——Factory Method模式
  • /usr/bin/python: can't decompress data; zlib not available 的异常处理
  • ??在JSP中,java和JavaScript如何交互?
  • @FeignClient 调用另一个服务的test环境,实际上却调用了另一个环境testone的接口,这其中牵扯到k8s容器外容器内的问题,注册到eureka上的是容器外的旧版本...