詳解vue在項(xiàng)目中使用百度地圖
更新時(shí)間：2019年03月26日 16:00:38 作者：愛吃排骨
這篇文章主要介紹了vue在項(xiàng)目中使用百度地圖，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
第一步，去百度地圖開發(fā)者申請(qǐng)秘鑰。
第二步在項(xiàng)目中引入，具體如下
其中index.html存放地圖鏈接，代碼如下
然后在APP.vue里面實(shí)現(xiàn)，代碼如下
<template>
<div id="app">
<div id="allmap" ref="allmap"></div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
map(){
let map =new BMap.Map(this.$refs.allmap); // 創(chuàng)建Map實(shí)例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.addControl(new BMap.MapTypeControl({//添加地圖類型控件
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京");// 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
}
},
mounted(){
this.map()
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#allmap{
height: 500px;
overflow: hidden;
}
</style>
以上所述是小編給大家介紹的vue在項(xiàng)目中使用百度地圖詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了詳解vue.js全局組件和局部組件，實(shí)例分析了全局組件和局部的技巧，有興趣的可以了解一下。2017-04-04
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)的5種方式及擴(kuò)展,在Vue中路由是一種用于導(dǎo)航和管理頁面之間跳轉(zhuǎn)的機(jī)制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以參考下2023-11-11
vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
Vue組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue中字典的使用,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
關(guān)于vue.js發(fā)布后路徑引用的問題解決
最近在vue.js項(xiàng)目發(fā)布后發(fā)現(xiàn)了一個(gè)關(guān)于路徑的問題，發(fā)現(xiàn)網(wǎng)上關(guān)于這個(gè)的資料較少，所以給大家總結(jié)下，下面這篇文章主要給大家介紹了如何解決關(guān)于vue.js發(fā)布后路徑引用的問題，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue-router 中router-view不能渲染的解決方法
本篇文章主要結(jié)合了vue-router 中router-view不能渲染的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue API中setup ref reactive函數(shù)使用教程
setup是用來寫組合式api，內(nèi)部的數(shù)據(jù)和方法需要通過return之后，模板才能使用。在之前vue2中，data返回的數(shù)據(jù)，可以直接進(jìn)行雙向綁定使用，如果我們把setup中數(shù)據(jù)類型直接雙向綁定，發(fā)現(xiàn)變量并不能實(shí)時(shí)響應(yīng)。接下來就詳細(xì)看看它們的使用2022-12-12