vue整合项目中百度API示例详解
目录
- 官网介绍
- 申请密钥
- 官方示例
- 项目实战
- 创建地图
- 获取经纬度
- 创建Map实例
- 两个坐标点之间的距离
- 查询地点信息
- Vue项目中整合百度API获取地理位置的方法
- 组件中使用
- vue-baidu-map 百度地图官方vue组件
官网介绍
- 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口
- 可帮助您在网站中，构建功能丰富交互性强的地图应用
- 支持PC端和移动端，基于浏览器的地图应用开发，且支持HTML5特性的地图开发
百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，需要先申请密钥（ak）才可以使用。
申请密钥
应用管理 -- 我的应用 -- 创建应用
创建成功之后，如上图所示。
应用名称 -- 百度地图，访问应用（AK） 就是需要的密钥。
官方示例
项目实战
创建地图
看一下官方demo就知道该怎么用了。
在页面中，使用 script 标签引入
<!-- ak需要替换成自己的 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
获取经纬度
搜索栏，输入地理位置，选择结果，在右上角复制当前坐标点，即可获取经纬度。
创建Map实例
html 部分
<template> <div id="map"></div> </template>
js 部分
const map = new BMap.Map("map"); // 创建Map实例
// 经度
let longt = 112.986422;
// 纬度
let lat = 28.197448;
//设置地图中心位置和缩放
map.centerAndZoom(new BMap.Point(longt, lat), 1200);
map.enableScrollWheelZoom(false); //鼠标滚轮缩放
//设置标注的经纬度
const marker = new BMap.Marker(new BMap.Point(112.984, 28.198133));
//把标注添加到地图上
map.addOverlay(marker);
页面显示效果如下：
两个坐标点之间的距离
const map = new BMap.Map('');
const pointA = new BMap.Point(113.364873,23.115797);
const pointB = new BMap.Point(113.364052, 23.115028);
var distance = (map.getDistance(pointA, pointB));
console.log(distance); // 单位 米
查询地点信息
举例说明 -- 橘子洲头
//GET请求 https://api.map.baidu.com/place/v2/search?query=橘子洲头®ion=全国&output=json&ak=您的密钥
查询出橘子洲头相关的一地址信息，经纬度等等。
完整的返回结果
{
"status":0,
"message":"ok",
"result_type":"poi_type",
"results":[
{
"name":"橘子洲景区",
"location":{
"lat":28.192929,
"lng":112.968743
},
"address":"湖南省长沙市岳麓区橘子洲头2号",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"83513b4be0009cc6213bf2cd",
"telephone":"(0731)88614640",
"detail":1,
"uid":"83513b4be0009cc6213bf2cd"
},
{
"name":"青年艺术雕塑",
"location":{
"lat":28.173455,
"lng":112.966916
},
"address":"橘子洲头2号橘子洲景区内",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"ab3dca630f93f12615c90570",
"telephone":"(0731)88614640",
"detail":1,
"uid":"ab3dca630f93f12615c90570"
},
{
"name":"橘子洲头碑",
"location":{
"lat":28.175443,
"lng":112.96717
},
"address":"橘洲路2号附近",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"",
"detail":1,
"uid":"25702022f40b7da1a7c75638"
},
{
"name":"岳麓山橘子洲旅游区问天台",
"location":{
"lat":28.170762,
"lng":112.966689
},
"address":"橘子洲头2号橘子洲景区内",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"70912806c30c2c9d2cb96d9c",
"detail":1,
"uid":"70912806c30c2c9d2cb96d9c"
},
{
"name":"橘子洲景区-休息区",
"location":{
"lat":28.206309,
"lng":112.971438
},
"address":"橘子洲头2号橘子洲景区内",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"",
"detail":1,
"uid":"6ae23d68a7adc6ae40ab9ad6"
},
{
"name":"橘子洲景区-停车场",
"location":{
"lat":28.203858,
"lng":112.969631
},
"address":"橘子洲头2号橘子洲景区内",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"4067817da6456a07b72655b2",
"detail":1,
"uid":"4067817da6456a07b72655b2"
},
{
"name":"洲头广场",
"location":{
"lat":28.171088,
"lng":112.966631
},
"address":"橘子洲头2号橘子洲景区内问天台附近",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"1c411697248e3ec19cec2bf9",
"detail":1,
"uid":"1c411697248e3ec19cec2bf9"
},
{
"name":"沐山浔(长沙岳麓山橘子洲头店)",
"location":{
"lat":28.198057,
"lng":112.961585
},
"address":"湖南省长沙市岳麓区新民路4号欣和资产大厦1楼",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"8d24ba5e370be9895cd4fe13",
"telephone":"(0731)85677520",
"detail":1,
"uid":"8d24ba5e370be9895cd4fe13"
},
{
"name":"橘子洲景区经营服务点",
"location":{
"lat":28.200331,
"lng":112.969288
},
"address":"橘子洲头2号",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"d71c3e4000c24f27b23c8163",
"detail":1,
"uid":"d71c3e4000c24f27b23c8163"
},
{
"name":"橘洲沙滩乐园-南门",
"location":{
"lat":28.20657,
"lng":112.970384
},
"address":"橘子洲头2号橘子洲公园以北(近橘子洲尾橘子洲拱极楼)",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"159d4e6bd2ff514209b93ad0",
"detail":1,
"uid":"159d4e6bd2ff514209b93ad0"
}
]
}
举例说明 -- 茶颜悦色
//GET请求 https://api.map.baidu.com/place/v2/search?query=茶颜悦色®ion=长沙&output=json&ak=您的密钥
可以查询到长沙的茶颜悦色：地址信息，经纬度等等信息。
完整的返回结果
{
"status":0,
"message":"ok",
"result_type":"poi_type",
"results":[
{
"name":"茶颜悦色(阳光100凤凰街店)",
"location":{
"lat":28.146368,
"lng":112.950625
},
"address":"湖南省长沙市岳麓区岳麓街道阳光100凤凰街18栋1037室",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"1660cdff5bc0dd2017c8f6ce",
"telephone":"19174865152",
"detail":1,
"uid":"1660cdff5bc0dd2017c8f6ce"
},
{
"name":"茶颜悦色(上河国际店)",
"location":{
"lat":28.185979,
"lng":113.034164
},
"address":"湖南省长沙市雨花区西子街146号c区",
"province":"湖南省",
"city":"长沙市",
"area":"雨花区",
"street_id":"3cdc04e8dcb588535abbbc3d",
"telephone":"19176658739",
"detail":1,
"uid":"3cdc04e8dcb588535abbbc3d"
},
{
"name":"茶颜悦色(九龙国金中心店)",
"location":{
"lat":28.197357,
"lng":112.986442
},
"address":"湖南省长沙市芙蓉区定王台街道东牌楼路长沙国金中心商场地库一层LG163-8号",
"province":"湖南省",
"city":"长沙市",
"area":"芙蓉区",
"street_id":"bd9a373edb36752f770269f6",
"telephone":"15387549235,4009989577",
"detail":1,
"uid":"bd9a373edb36752f770269f6"
},
{
"name":"茶颜悦色(高铁站店)",
"location":{
"lat":28.153612,
"lng":113.071826
},
"address":"长沙市雨花区红旗路长沙南站候车厅二楼B12-B13检票口楼上",
"province":"湖南省",
"city":"长沙市",
"area":"雨花区",
"telephone":"17375891175",
"detail":1,
"uid":"994a4c1807e8626008b93a8e"
},
{
"name":"茶颜悦色(高铁南二店)",
"location":{
"lat":28.152715,
"lng":113.073768
},
"address":"雨花区雨花大道武广高铁站东广场进站口正西方向78米",
"province":"湖南省",
"city":"长沙市",
"area":"雨花区",
"street_id":"18f4295755bcedba774ff1b0",
"telephone":"18390892675",
"detail":1,
"uid":"18f4295755bcedba774ff1b0"
},
{
"name":"茶颜悦色(公园大都会店)",
"location":{
"lat":28.217887,
"lng":112.998171
},
"address":"湖南省长沙市开福区东风路71号",
"province":"湖南省",
"city":"长沙市",
"area":"开福区",
"street_id":"286e6312c1ddb3546c3e1be2",
"telephone":"19198138132",
"detail":1,
"uid":"286e6312c1ddb3546c3e1be2"
},
{
"name":"茶颜悦色(涉外店)",
"location":{
"lat":28.207142,
"lng":112.877791
},
"address":"湖南省长沙市岳麓区高新开发区枫林三路与麓松路交汇处的东北角东塘商业大楼一楼A03商铺",
"province":"湖南省",
"city":"长沙市",
"area":"岳麓区",
"street_id":"2f68f9d98ada063e63180930",
"detail":1,
"uid":"2f68f9d98ada063e63180930"
},
{
"name":"茶颜悦色(窑岭店)",
"location":{
"lat":28.191754,
"lng":113.002836
},
"address":"湖南省长沙市芙蓉区人民中路201号",
"province":"湖南省",
"city":"长沙市",
"area":"芙蓉区",
"street_id":"5e37b57b42107b9b30f71df2",
"telephone":"15387579067",
"detail":1,
"uid":"5e37b57b42107b9b30f71df2"
},
{
"name":"茶颜悦色(泉塘店)",
"location":{
"lat":28.22173,
"lng":113.114117
},
"address":"湖南省长沙市长沙县泉塘街泉塘二期35栋",
"province":"湖南省",
"city":"长沙市",
"area":"长沙县",
"street_id":"2cea24cf1af4e8fee0110361",
"telephone":"19174816659",
"detail":1,
"uid":"2cea24cf1af4e8fee0110361"
},
{
"name":"茶颜悦色(平和堂百货店)",
"location":{
"lat":28.200329,
"lng":112.983429
},
"address":"湖南省长沙市芙蓉区黄兴中路88号平和堂百货B1层",
"province":"湖南省",
"city":"长沙市",
"area":"芙蓉区",
"street_id":"2fe14fb0c66b8762c056acae",
"telephone":"19174861869",
"detail":1,
"uid":"2fe14fb0c66b8762c056acae"
}
]
}
Vue项目中整合百度API获取地理位置的方法
新建 src\utils\loadBMap.js 文件
/**
* 加载地图
* @param {Function} callback 回调函数名称，回调函数将会挂载到window上，例如：window.initBaiduMapScript，在方法中就能拿到BMap对象
*/
export function loadBMap(callback) {
var script = document.createElement('script')
script.src = 'http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=' + callback
document.body.appendChild(script)
}
通过百度API服务类Geolocation 来实现
Geolocation
返回用户当前的位置。此方法利用浏览器的geolocation接口获取用户当前位置，不支持的浏览器将无法获取。
getCurrentPosition()
返回用户当前位置。
getStatus()
返回状态码，当定位成功后，状态码为：BMAP_STATUS_SUCCESS
组件中使用
<script>
const that = this
window.initBaiduMapScript = () => {
that.BMap = window.BMap
// 获取地理位置
that.getLocation()
}
loadBMap('initBaiduMapScript')
</script>
data定义的参数
// 获取地理位置 BMap: null, geolocation: null, // Geolocation对象实例 positioning: false, // 定位中 positioningInterval: null, // 定位倒计时计时器 countDown: 30, // 倒计时，单位秒 location: null, // 位置信息
点击下方详细信息，查看获取地理位置的方法 getLocation 完整代码。
// 获取地理定位
getLocation() {
const that = this
that.loading = true
that.$message.success('获取地理位置定位中')
that.geolocation = new that.BMap.Geolocation()
if (that.geolocation) {
// 开启SDK辅助定位，仅当使用环境为移动web混合开发，且开启了定位sdk辅助定位功能后生效
that.geolocation.enableSDKLocation()
// 开始定位
this.positioning = true
// 倒计时
this.positioningInterval = setInterval(() => {
if (this.countDown === 0) {
this.countDown = 30
clearInterval(this.positioningInterval)
} else {
this.countDown--
}
}, 1000)
// 位置选项
const positionOptions = {
enableHighAccuracy: true, // 要求浏览器获取最佳结果
timeout: 30, // 超时时间
maximumAge: 0, // 允许返回指定时间内的缓存结果。如果此值为0，则浏览器将立即获取新定位结果
}
// 获取用户位置信息
that.geolocation.getCurrentPosition((position) => {
that.resetPositioning()
// 获取定位结果状态码
const statusCode = that.geolocation.getStatus()
let msg = '由于未知错误而无法检索设备的位置' // 提示消息
let msgType = 'error' // 消息类型
// 判断结果状态码，为0代表获取成功，读取省市、经纬度
switch (statusCode) {
case 0:
msgType = 'success'
msg = '获取地理位置定位请求成功'
if (position) {
console.log('pppppppp')
console.log(position)
// 数据变量定义
let lat = 0.0 // 经度
let lng = 0.0 // 纬度
let province = '未知' // 经度
let city = '未知' // 纬度
// 坐标
if (position.point) {
lat = position.point.lat
lng = position.point.lng
}
// 位置
if (position.address) {
province = position.address.province
city = position.address.city
}
that.location = {
province,
city,
省份: province,
城市: city,
经度: lat,
纬度: lng,
}
} else {
msg = '由于未知错误而无法检索设备的位置'
}
break
case 2:
msg = '由于未知错误而无法检索设备的位置'
break
case 4:
case 5:
msg = '位置服务请求非法'
break
case 6:
msg = '应用程序没有使用位置服务的权限'
break
case 7:
msg = '网络不可用或者无法连接到获取位置信息的卫星'
break
case 8:
msg = '无法在指定的最大超时间隔内检索位置信息'
break
default:
msg = '由于未知错误而无法检索设备的位置'
break
}
console.log(that.location)
console.log(msg)
that.loading = false
that.$message.success(msg)
}, positionOptions)
} else {
that.loading = false
console.log('您的浏览器不支持地理位置服务')
that.$message.error('您的浏览器不支持地理位置服务')
}
},
// 重置定位相关数据
resetPositioning() {
this.positioning = false
this.location = null
this.countDown = 30
clearInterval(this.positioningInterval)
},
vue-baidu-map 百度地图官方vue组件
安装
npm i --save vue-baidu-map
初始化
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
使用
<template>
<baidu-map class="map">
</baidu-map>
</template>
<style>
/* 地图容器必须设置宽和高属性 */
.map {
width: 400px;
height: 300px;
}
</style>
以上就是vue整合项目中百度API示例详解的详细内容，更多关于vue整合百度API的资料请关注我们其它相关文章！
相关推荐
-
vue cli3 调用百度翻译API翻译页面的实现示例
首先说下,本人为在校大三狗一只,缺少实战开发经验,然后用语什么的也不标准,就按我自己的想法写的,有什么不对的地方欢迎指导指导哈 然后直接开始吧 在需要翻译的地方做上标记,这里用的是添加名为"text-dom"的class的方法.比如: <div class="text-dom">原文:</div> 定义储存数据的data data() { return { before: { q: "", //输入的原文 to: &quo
-
vue.js的vue-cli脚手架中使用百度地图API的实例
第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用) 2.密钥申请成功后 第二步,在项目的需要模板中引入,具体如下: 项目路径 其中index.html存放地图链接,代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型 demo演示可查看 选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j
-
如何在vue项目中使用百度地图API
目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录 网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0
-
vue项目实现便捷接入百度地图API
目录 1.账号注册 2.获取密钥 3.创建项目 4.项目导入 5.效果展示 1.账号注册 在百度地图开放平台注册账号并登录网站地址: https://lbsyun.baidu.com/index.php?title=jspopularGL 2.获取密钥 进入开发文档并进行密钥申请 3.创建项目 4.项目导入 此时我们已经获取了密钥,接着就可以在项目中导入了 首先安装百度地图 npm install vue-baidu-map --save 接着注册(这里我采用局部注册) //局部注册 百度地图
-
详解vue项目中调用百度地图API使用方法
步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"
-
vue整合项目中百度API示例详解
目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri
-
vue3-pinia-ts项目中的使用示例详解
store.ts import { defineStore } from "pinia"; import { GlobalState, ThemeConfigProp } from "./interface"; import { createPinia } from "pinia"; import piniaPersistConfig from "@/config/piniaPersist"; import piniaPlu
-
Vue中的vue-resource示例详解
vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro
-
Vue项目接入Paypal实现示例详解
一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr
-
Vue2如何支持composition API示例详解
目录 前言 如何使用 原理解析 响应式( ref reactive 的实现) 总结 前言 自从 Vue3 发布之后,composition API 这个词走入写 Vue 同学的视野之中,相信大家也一直听到 composition API 比之前的 options API 有多好多强,如今由于 @vue/composition-api 插件的发布,Vue2 的同学也可以上车咯,接下来我们主要以响应式的 ref 和 reactive 来深入分析一下,这个插件是怎么实现此功能的. 如何使用 // 入口
-
Vue transx组件切换动画库示例详解
目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q
-
vue electron实现无边框窗口示例详解
目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro
-
Springboot Vue可配置调度任务实现示例详解
目录 正文 1.表结构: 2.接口: 3.业务层: 4.Mapper 5.前端(Vue): 正文 Springboot + Vue,定时任务调度的全套实现方案. 这里用了quartz这个框架,实现分布式调度任务很不错,关于quarz的使用方式改天补一篇.相当简单. 1.表结构: sys_job 列名 数据类型 长度 是否可空 是否主键 说明 job_id bigint 否 是 任务ID job_name varchar 64 否 是 任务名称 job_group varchar 64 否 是 任
-
javascrip高级前端开发常用的几个API示例详解
目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati
-
Vue.js实现watch属性的示例详解
目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原