vue百度地圖 + 定位的詳解
vue 百度地圖 + 定位
前提需要自己有百度的密鑰,如沒有可以去百度地圖申請
一、在主目錄下的index.html引入js,例如:

二、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中與entry平級,例如:

三、在項(xiàng)目中引入BMap:

四、代碼:
<template>
<div class="home">
<div id="allmap" class="allmap"></div>
</div>
</template>
<script>
import {getStore, setStore, removeStore} from '@/config/Utils'
import BMap from 'BMap'
export default {
data () {
return {
type: 'tab',
address_detail: null,
center: {lng: 116.40387397, lat: 39.91488908}
}
},
mounted () {
this.ready()
},
methods: {
ready () {
let map = new BMap.Map('allmap')
let point = new BMap.Point(this.center.lng, this.center.lat)
map.centerAndZoom(point, 10)
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude
this.center.lat = r.latitude
let markers = new BMap.Marker(r.point)
map.addOverlay(markers)
map.panTo(r.point)
map.centerAndZoom(r.point, 16)
}
}, { enableHighAccuracy: true })
}
}
}
</script>
<style>
#allmap{
width: 100%;
height: 15rem;
}
</style>

五、效果:

如有錯誤地方,請留言指教,謝謝大家
以上所述是小編給大家介紹的vue百度地圖 + 定位詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點(diǎn)調(diào)試Vue的方法以及心得分享,需要的朋友參考學(xué)習(xí)下。2018-02-02
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解vuex中mutations方法的使用與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實(shí)現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
Vue+Echarts實(shí)現(xiàn)繪制動態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動態(tài)折線圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
這篇文章主要介紹了vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組
這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

