vue項目實現(xiàn)便捷接入百度地圖API
更新時間：2022年04月26日 16:40:46 作者：失散多年的哥哥
部分項目需要地圖的嵌入，這篇文章主要介紹了vue項目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助
1.賬號注冊
在百度地圖開放平臺注冊賬號并登錄
網(wǎng)站地址： https://lbsyun.baidu.com/index.php?title=jspopularGL
2.獲取密鑰
進(jìn)入開發(fā)文檔并進(jìn)行密鑰申請
3.創(chuàng)建項目
4.項目導(dǎo)入
此時我們已經(jīng)獲取了密鑰，接著就可以在項目中導(dǎo)入了
首先安裝百度地圖
npm install vue-baidu-map --save
接著注冊（這里我采用局部注冊）
//局部注冊 百度地圖 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àn)便捷接入百度地圖API的詳細(xì)內(nèi)容，更多關(guān)于vue接入百度地圖API的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何利用Vue制作出卡片無限滾動動畫，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)有一定幫助，需要的可以參考一下2022-05-05
這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對象是否為空的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue axios調(diào)用接口方法報錯500 internal server err
前端使用axios 訪問后端接口時報錯,在瀏覽器中點擊紅色的報錯數(shù)據(jù),本文給大家分享vue axios調(diào)用接口方法報錯500 internal server error的兩種解決方法,感興趣的朋友一起看看吧2023-10-10
這篇文章給大家介紹了基于vue封裝一個帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例
這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能(實例代碼)
這篇文章主要介紹了基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
文章介紹了uniapp微信小程序金額展示套餐的相關(guān)內(nèi)容,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
mpvue是一個使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，這篇文章主要介紹了mpvue構(gòu)建小程序的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue-cli構(gòu)建vue項目的步驟詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)
Three.js是一個常見的需求,Three.js是一個用于在瀏覽器中創(chuàng)建和顯示動畫3D計算機(jī)圖形的JavaScript庫,這篇文章主要介紹了Vue3中如何使用Three.js的相關(guān)資料,包括各種樣例、常見場景、問題及解決方案,需要的朋友可以參考下2025-04-04