vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API
更新時(shí)間：2022年04月26日 16:40:46 作者：失散多年的哥哥
部分項(xiàng)目需要地圖的嵌入，這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助
1.賬號(hào)注冊(cè)
在百度地圖開放平臺(tái)注冊(cè)賬號(hào)并登錄
網(wǎng)站地址： https://lbsyun.baidu.com/index.php?title=jspopularGL
2.獲取密鑰
進(jìn)入開發(fā)文檔并進(jìn)行密鑰申請(qǐng)
3.創(chuàng)建項(xiàng)目
4.項(xiàng)目導(dǎo)入
此時(shí)我們已經(jīng)獲取了密鑰，接著就可以在項(xiàng)目中導(dǎo)入了
首先安裝百度地圖
npm install vue-baidu-map --save
接著注冊(cè)（這里我采用局部注冊(cè)）
//局部注冊(cè) 百度地圖 import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
最后在界面文件中導(dǎo)入
<template>
<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
</baidu-map>
</template>
<script>
export default {
name: 'TestBaiDu',
data () {
return {
center: {lng: 109.45744048529967, lat: 36.49771311230842},
zoom: 13
}
},
methods: {
handler ({BMap, map}) {
var point = new BMap.Point(109.49926175379778, 36.60449676862417)
map.centerAndZoom(point, 13)
var marker = new BMap.Marker(point) // 創(chuàng)建標(biāo)注
map.addOverlay(marker) // 將標(biāo)注添加到地圖中
var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
map.addOverlay(circle)
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
}
5.效果展示
以上就是vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API的詳細(xì)內(nèi)容，更多關(guān)于vue接入百度地圖API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于Vue實(shí)現(xiàn)卡片無限滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何利用Vue制作出卡片無限滾動(dòng)動(dòng)畫，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-05-05
Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例
這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server err
前端使用axios 訪問后端接口時(shí)報(bào)錯(cuò),在瀏覽器中點(diǎn)擊紅色的報(bào)錯(cuò)數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報(bào)錯(cuò)500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
Vue項(xiàng)目創(chuàng)建首頁(yè)發(fā)送axios請(qǐng)求的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目創(chuàng)建首頁(yè)發(fā)送axios請(qǐng)求的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能(實(shí)例代碼)
這篇文章主要介紹了基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
文章介紹了uniapp微信小程序金額展示套餐的相關(guān)內(nèi)容,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
mpvue是一個(gè)使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue-cli構(gòu)建vue項(xiàng)目的步驟詳解
這篇文章主要介紹了vue-cli構(gòu)建vue項(xiàng)目的步驟詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue3中如何使用Three.js詳解(包括各種樣例、常見場(chǎng)景、問題及解決方案)
Three.js是一個(gè)常見的需求,Three.js是一個(gè)用于在瀏覽器中創(chuàng)建和顯示動(dòng)畫3D計(jì)算機(jī)圖形的JavaScript庫(kù),這篇文章主要介紹了Vue3中如何使用Three.js的相關(guān)資料,包括各種樣例、常見場(chǎng)景、問題及解決方案,需要的朋友可以參考下2025-04-04