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