vue整合項目中百度API示例詳解
更新時間：2022年09月21日 08:35:47 作者：OrzR3
這篇文章主要為大家介紹了vue整合項目中百度API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
官網(wǎng)介紹
- 百度地圖 JavaScript API 是一套由 JavaScript 語言編寫的應用程序接口
- 可幫助您在網(wǎng)站中，構建功能豐富交互性強的地圖應用
- 支持PC端和移動端，基于瀏覽器的地圖應用開發(fā)，且支持HTML5特性的地圖開發(fā)
?? 官網(wǎng)傳送門
百度地圖JavaScript API支持HTTP和HTTPS，免費對外開放，可直接使用。接口使用無次數(shù)限制。在使用前，需要先申請密鑰（ak）才可以使用。
申請密鑰
??申請密鑰傳送門
應用管理 -- 我的應用 -- 創(chuàng)建應用
創(chuàng)建成功之后，如上圖所示。
應用名稱 -- 百度地圖，訪問應用（AK） 就是需要的密鑰。
官方示例
項目實戰(zhàn)
創(chuàng)建地圖
看一下官方demo就知道該怎么用了。
在頁面中，使用 script 標簽引入
<!-- ak需要替換成自己的 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
獲取經緯度
搜索欄，輸入地理位置，選擇結果，在右上角復制當前坐標點，即可獲取經緯度。
創(chuàng)建Map實例
html 部分
<template> <div id="map"></div> </template>
js 部分
const map = new BMap.Map("map"); // 創(chuàng)建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":"橘子洲景區(qū)",
"location":{
"lat":28.192929,
"lng":112.968743
},
"address":"湖南省長沙市岳麓區(qū)橘子洲頭2號",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"83513b4be0009cc6213bf2cd",
"telephone":"(0731)88614640",
"detail":1,
"uid":"83513b4be0009cc6213bf2cd"
},
{
"name":"青年藝術雕塑",
"location":{
"lat":28.173455,
"lng":112.966916
},
"address":"橘子洲頭2號橘子洲景區(qū)內",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"ab3dca630f93f12615c90570",
"telephone":"(0731)88614640",
"detail":1,
"uid":"ab3dca630f93f12615c90570"
},
{
"name":"橘子洲頭碑",
"location":{
"lat":28.175443,
"lng":112.96717
},
"address":"橘洲路2號附近",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"",
"detail":1,
"uid":"25702022f40b7da1a7c75638"
},
{
"name":"岳麓山橘子洲旅游區(qū)問天臺",
"location":{
"lat":28.170762,
"lng":112.966689
},
"address":"橘子洲頭2號橘子洲景區(qū)內",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"70912806c30c2c9d2cb96d9c",
"detail":1,
"uid":"70912806c30c2c9d2cb96d9c"
},
{
"name":"橘子洲景區(qū)-休息區(qū)",
"location":{
"lat":28.206309,
"lng":112.971438
},
"address":"橘子洲頭2號橘子洲景區(qū)內",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"",
"detail":1,
"uid":"6ae23d68a7adc6ae40ab9ad6"
},
{
"name":"橘子洲景區(qū)-停車場",
"location":{
"lat":28.203858,
"lng":112.969631
},
"address":"橘子洲頭2號橘子洲景區(qū)內",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"4067817da6456a07b72655b2",
"detail":1,
"uid":"4067817da6456a07b72655b2"
},
{
"name":"洲頭廣場",
"location":{
"lat":28.171088,
"lng":112.966631
},
"address":"橘子洲頭2號橘子洲景區(qū)內問天臺附近",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"1c411697248e3ec19cec2bf9",
"detail":1,
"uid":"1c411697248e3ec19cec2bf9"
},
{
"name":"沐山潯(長沙岳麓山橘子洲頭店)",
"location":{
"lat":28.198057,
"lng":112.961585
},
"address":"湖南省長沙市岳麓區(qū)新民路4號欣和資產大廈1樓",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"8d24ba5e370be9895cd4fe13",
"telephone":"(0731)85677520",
"detail":1,
"uid":"8d24ba5e370be9895cd4fe13"
},
{
"name":"橘子洲景區(qū)經營服務點",
"location":{
"lat":28.200331,
"lng":112.969288
},
"address":"橘子洲頭2號",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"d71c3e4000c24f27b23c8163",
"detail":1,
"uid":"d71c3e4000c24f27b23c8163"
},
{
"name":"橘洲沙灘樂園-南門",
"location":{
"lat":28.20657,
"lng":112.970384
},
"address":"橘子洲頭2號橘子洲公園以北(近橘子洲尾橘子洲拱極樓)",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"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":"湖南省長沙市岳麓區(qū)岳麓街道陽光100鳳凰街18棟1037室",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"1660cdff5bc0dd2017c8f6ce",
"telephone":"19174865152",
"detail":1,
"uid":"1660cdff5bc0dd2017c8f6ce"
},
{
"name":"茶顏悅色(上河國際店)",
"location":{
"lat":28.185979,
"lng":113.034164
},
"address":"湖南省長沙市雨花區(qū)西子街146號c區(qū)",
"province":"湖南省",
"city":"長沙市",
"area":"雨花區(qū)",
"street_id":"3cdc04e8dcb588535abbbc3d",
"telephone":"19176658739",
"detail":1,
"uid":"3cdc04e8dcb588535abbbc3d"
},
{
"name":"茶顏悅色(九龍國金中心店)",
"location":{
"lat":28.197357,
"lng":112.986442
},
"address":"湖南省長沙市芙蓉區(qū)定王臺街道東牌樓路長沙國金中心商場地庫一層LG163-8號",
"province":"湖南省",
"city":"長沙市",
"area":"芙蓉區(qū)",
"street_id":"bd9a373edb36752f770269f6",
"telephone":"15387549235,4009989577",
"detail":1,
"uid":"bd9a373edb36752f770269f6"
},
{
"name":"茶顏悅色(高鐵站店)",
"location":{
"lat":28.153612,
"lng":113.071826
},
"address":"長沙市雨花區(qū)紅旗路長沙南站候車廳二樓B12-B13檢票口樓上",
"province":"湖南省",
"city":"長沙市",
"area":"雨花區(qū)",
"telephone":"17375891175",
"detail":1,
"uid":"994a4c1807e8626008b93a8e"
},
{
"name":"茶顏悅色(高鐵南二店)",
"location":{
"lat":28.152715,
"lng":113.073768
},
"address":"雨花區(qū)雨花大道武廣高鐵站東廣場進站口正西方向78米",
"province":"湖南省",
"city":"長沙市",
"area":"雨花區(qū)",
"street_id":"18f4295755bcedba774ff1b0",
"telephone":"18390892675",
"detail":1,
"uid":"18f4295755bcedba774ff1b0"
},
{
"name":"茶顏悅色(公園大都會店)",
"location":{
"lat":28.217887,
"lng":112.998171
},
"address":"湖南省長沙市開福區(qū)東風路71號",
"province":"湖南省",
"city":"長沙市",
"area":"開福區(qū)",
"street_id":"286e6312c1ddb3546c3e1be2",
"telephone":"19198138132",
"detail":1,
"uid":"286e6312c1ddb3546c3e1be2"
},
{
"name":"茶顏悅色(涉外店)",
"location":{
"lat":28.207142,
"lng":112.877791
},
"address":"湖南省長沙市岳麓區(qū)高新開發(fā)區(qū)楓林三路與麓松路交匯處的東北角東塘商業(yè)大樓一樓A03商鋪",
"province":"湖南省",
"city":"長沙市",
"area":"岳麓區(qū)",
"street_id":"2f68f9d98ada063e63180930",
"detail":1,
"uid":"2f68f9d98ada063e63180930"
},
{
"name":"茶顏悅色(窯嶺店)",
"location":{
"lat":28.191754,
"lng":113.002836
},
"address":"湖南省長沙市芙蓉區(qū)人民中路201號",
"province":"湖南省",
"city":"長沙市",
"area":"芙蓉區(qū)",
"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":"湖南省長沙市芙蓉區(qū)黃興中路88號平和堂百貨B1層",
"province":"湖南省",
"city":"長沙市",
"area":"芙蓉區(qū)",
"street_id":"2fe14fb0c66b8762c056acae",
"telephone":"19174861869",
"detail":1,
"uid":"2fe14fb0c66b8762c056acae"
}
]
}
Vue項目中整合百度API獲取地理位置的方法
新建 src\utils\loadBMap.js 文件
/**
* 加載地圖
* @param {Function} callback 回調函數(shù)名稱，回調函數(shù)將會掛載到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 來實現(xiàn)
Geolocation
返回用戶當前的位置。此方法利用瀏覽器的geolocation接口獲取用戶當前位置，不支持的瀏覽器將無法獲取。
getCurrentPosition()
返回用戶當前位置。
getStatus()
返回狀態(tài)碼，當定位成功后，狀態(tài)碼為：BMAP_STATUS_SUCCESS
組件中使用
<script>
const that = this
window.initBaiduMapScript = () => {
that.BMap = window.BMap
// 獲取地理位置
that.getLocation()
}
loadBMap('initBaiduMapScript')
</script>
data定義的參數(shù)
// 獲取地理位置 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輔助定位，僅當使用環(huán)境為移動web混合開發(fā)，且開啟了定位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()
// 獲取定位結果狀態(tài)碼
const statusCode = that.geolocation.getStatus()
let msg = '由于未知錯誤而無法檢索設備的位置' // 提示消息
let msgType = 'error' // 消息類型
// 判斷結果狀態(tài)碼，為0代表獲取成功，讀取省市、經緯度
switch (statusCode) {
case 0:
msgType = 'success'
msg = '獲取地理位置定位請求成功'
if (position) {
console.log('pppppppp')
console.log(position)
// 數(shù)據(jù)變量定義
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 = '網(wǎng)絡不可用或者無法連接到獲取位置信息的衛(wèi)星'
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('您的瀏覽器不支持地理位置服務')
}
},
// 重置定位相關數(shù)據(jù)
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 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 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實現(xiàn)一個簡單的Grid拖拽布局,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個聊天框時,請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時,需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設置滾動條自動保持到最底端,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue3打包部署報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的九宮格抽獎效果,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的可以了解一下2023-10-10
vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import)，主要包括vue3自動導入和API的自動引入問題，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了詳解從react轉職到vue開發(fā)的項目準備，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue表單校驗規(guī)則（rules）是一種用于驗證表單數(shù)據(jù)的對象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進行數(shù)據(jù)驗證,這篇文章主要給大家介紹了關于Vue.js?rules校驗規(guī)則的相關資料,需要的朋友可以參考下2024-02-02