扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue整合项目中百度API示例详解
  • 107

0
分享到

vue整合项目中百度API示例详解

2024-04-02 19:04:59 107人浏览 泡泡鱼
摘要

目录官网介绍申请密钥官方示例项目实战创建地图获取经纬度创建Map实例两个坐标点之间的距离查询地点信息Vue项目中整合百度api获取地理位置的方法组件中使用vue-baidu-map

官网介绍

  • 百度地图 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=橘子洲头&region=全国&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=茶颜悦色&region=长沙&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 文件


 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组件

GitHub地址 vue-baidu-map 文档

安装

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的资料请关注编程网其它相关文章！

--结束END--

本文标题: vue整合项目中百度API示例详解

本文链接: https://lsjlt.com/news/168025.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue整合项目中百度API示例详解
    目录官网介绍申请密钥官方示例项目实战创建地图获取经纬度创建Map实例两个坐标点之间的距离查询地点信息Vue项目中整合百度API获取地理位置的方法组件中使用vue-baidu-map ...
    99+
    2024-04-02
  • Vue项目中使用百度地图api的详细步骤
    目录1.百度开发者认证2.创建应用3.引用百度地图API文件总结1.百度开发者认证 进入百度地图开放平台 官网，（认证需要身份证号码，人脸识别，手机百度APP，邮箱地址） ...
    99+
    2022-11-13
    vue使用百度地图api 百度地图api接口 vue 地图
  • 如何在vue项目中使用百度地图API
    目录1、在百度地图开放平台注册账号并登录2、选择自己所需的地图版本：3、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的...
    99+
    2024-04-02
  • 怎么在vue项目中使用百度地图API
    小编给大家分享一下怎么在vue项目中使用百度地图API，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！为什么要使用VueVue是一款友好的、多用途且高性能的Java...
    99+
    2023-06-14
  • Vue项目整合及优化的示例分析
    这篇文章给大家分享的是有关Vue项目整合及优化的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言使用 webpack 构建过 Vue 项目的同学应该知道 alias 的...
    99+
    2024-04-02
  • vue项目实现便捷接入百度地图API
    目录1.账号注册2.获取密钥3.创建项目4.项目导入5.效果展示1.账号注册 在百度地图开放平台注册账号并登录网站地址： https://lbsyun.baidu.com/index...
    99+
    2024-04-02
  • 详解React项目中eslint使用百度风格
    1.安装百度Eslint Rule 插件 npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/es...
    99+
    2024-04-02
  • vue整合百度地图显示指定地点信息
    目录一、安装相关依赖二、在main.js中引用三、创建地图工具 map.js四、绘制地图先看看效果图 一、安装相关依赖 npm i --save vue-baidu-map 二、在...
    99+
    2024-04-02
  • 实例讲解如何在Vue中使用百度地图API
    Vue是一款流行的JavaScript框架，可以非常快速地搭建单页Web应用程序。百度地图API是一组允许开发人员使用的地图API，可以用于各种应用程序中。本文将介绍如何在Vue中使用百度地图API，并通过实例将数据点按照特定规则分组。使用...
    99+
    2023-05-14
  • SSM框架整合JSP中集成easyui前端ui项目开发示例详解
    目录前言EasyUI下载与配置页面美化运行结果总结与问题前言 前端的UI框架很多，如bootsrap、layui、easyui等，这些框架提供了大量控件供开发人员使用，我们无需花费太...
    99+
    2024-04-02
  • SpringBoot项目整合Redis教程详解
    目录Redis 业务实践 Redis 是完全开源的，遵守 BSD 协议，是一个高性能的 key-value 数据库. Redis 与其他 key - value 缓存产品有以下三个特...
    99+
    2023-05-13
    Java SpringBoot项目整合 SpringBoot整合Redis
  • Vue3中的组合式 API示例详解
    目录为什么要有组合式 API？更好的逻辑复用更灵活的代码组织更好的类型推导生产包体积更小与选项式 API 的关系组合式 API 是否覆盖了所有场景？可以同时使用两种 API 吗？选项...
    99+
    2024-04-02
  • IDEA SSM整合Redis项目的示例分析
    这篇文章给大家分享的是有关IDEA SSM整合Redis项目的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。IDEA SSM整合Redis项目实例1、pom.xml 配置 <!--&nbs...
    99+
    2023-06-15
  • vue怎么整合百度地图显示指定地点信息
    这篇文章主要讲解了“vue怎么整合百度地图显示指定地点信息”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么整合百度地图显示指定地点信息”吧！先看看效果图一、安装相关依赖npm&nbs...
    99+
    2023-06-29
  • vue.js中vue-cli脚手架使用百度地图API的示例分析
    小编给大家分享一下vue.js中vue-cli脚手架使用百度地图API的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！第...
    99+
    2024-04-02
  • Vue2项目中对百度地图的封装使用详解
    目录需求知识点实现打点控件封装代码总览代码总结 百度地图的使用： vue项目，有个 vue-baidu-map 可以用，但是好久不更新了。 React项目，百度官...
    99+
    2024-04-02
  • .Net Core项目中NLog整合Exceptionless实例
    目录前言概念ExceptionlessNLog环境搭建Exceptionless搭建集成NLog简单测试一下总结前言 在实际的.Net Core相关项目开发中，很多人都会把NLog作...
    99+
    2024-04-02
  • 详解SpringBoot项目整合Vue做一个完整的用户注册功能
    目录前言1 实现用户注册流程1.1 用户注册完整流程1.2 用户注册信息及校验2 后台接口设计2.1 上传头像接口2.2 用户注册接口3 后端代码实现3.1 用户头像上传接口编码实现...
    99+
    2024-04-02
  • SpringBoot整合Druid、Redis的示例详解
    目录1.整合Druid1.1Druid简介1.2添加上 Druid 数据源依赖1.3使用Druid 数据源 2.整合redis2.1添加上 redis依赖2.2yml添加r...
    99+
    2024-04-02
  • SpringBoot示例代码整合Redis详解
    目录Redis 简介Redis 优势Redis与其他key-value存储有什么不同添加Redis依赖包配置Redis数据库连接编写Redis操作工具类测试Redis 简介 Redi...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作