Vue的百度地圖插件嘗試使用
更新時(shí)間：2017年09月06日 09:21:56 作者：PureView
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
百度地圖插件
安裝
CDN全局安裝
<script src="https://unpkg.com/vue-baidu-map"></script>
插件的引入
Vue.use(VueBaiduMap.default, {
ak: 'YOUR_APP_KEY',
})
ak 是在百度地圖開(kāi)發(fā)者平臺(tái)申請(qǐng)的密鑰 詳見(jiàn) http://lbsyun.baidu.com/apico...
地圖視圖
BmView 是用于渲染百度地圖實(shí)例可視化區(qū)域的容器
使用 Bmview 渲染一個(gè)地圖實(shí)例：
<template id="baidu">
<baidu-map class="map">
<bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
</baidu-map>
</template>
給地圖添加一個(gè)縮放控件
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
把控件放到我們渲染的地圖實(shí)例里就可以了
效果如下：
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>baidumap</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-baidu-map"></script>
<style>
#map{
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<div id="map">
<baidu></baidu>
</div>
<template id="baidu">
<baidu-map class="map">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-view style="position: absolute; top: 60px; bottom: 20px; left: 20px; right: 20px"></bm-view>
</baidu-map>
</template>
<script>
Vue.use(VueBaiduMap.default, {
ak: 'YOUR_APP_KEY',
})
Vue.component("baidu",{
template:'#baidu'
})
new Vue({
el:'#map'
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue在ie10下空白頁(yè)的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁(yè)的debug相關(guān)資料，這是最近在工作中遇到的一個(gè)問(wèn)題，通過(guò)查找相關(guān)的資料終于解決了，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級(jí)入門(mén))的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
在vue項(xiàng)目中引入vue-beauty操作方法
在本篇文章里小編給大家分享了關(guān)于在vue項(xiàng)目中引入vue-beauty操作方法，有需要的朋友們跟著學(xué)習(xí)參考下。2019-02-02
對(duì)vue中v-on綁定自定事件的實(shí)例講解
今天小編就為大家分享一篇對(duì)vue中v-on綁定自定事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Element?Plus，由餓了么大前端團(tuán)隊(duì)開(kāi)源出品的一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于?Vue?3.0?的組件庫(kù)，Element?Plus是基于Vue3面向設(shè)計(jì)師和開(kāi)發(fā)者的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型2022-12-12
詳解Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題
這篇文章主要介紹了Vue-axios 設(shè)置請(qǐng)求頭問(wèn)題,文中給大家提到了axios設(shè)置請(qǐng)求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
下面小編就為大家分享一篇基于Vuex無(wú)法觀察到值變化的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了vue腳手架中配置Sass的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue中swiper開(kāi)啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開(kāi)啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09