vue 引入百度地圖


1、注冊百度賬號,成為百度開發者,獲取專屬的密鑰(ak)
2、在index.html 中引入百度地圖api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s52s7GZdqGvMRqQ5BpdIPzuz1NkwOxcD" ></script>

 

3、在webpack.base.conf.js配置文件中配置BMap;
externals: {
"BMap": "BMap"
},

 

4、demo
<template>
<div class="projectmap">
<div class="title">項目分布圖</div>
<div id="allmap" ref="allmap"></div>
</div>
</template>
 
<script>
import BMap from 'BMap'
export default {
name: 'project-map',
methods: {
map () {
let map = new BMap.Map(this.$refs.allmap)// 創建Map實例
map.centerAndZoom('北京', 15) // 初始化地圖,用城市名設置地圖中心點
map.enableScrollWheelZoom(true)// 開啟鼠標滾輪縮放
}
 
},
mounted () {
this.map()
}
 
}
</script>
 
<style scoped>
.projectmap{
margin: 15px;
height: 255px;
width: 880px;
}
#allmap {
height: 210px;
overflow: hidden;
}
.title{
height: 18px;
line-height: 18px;
color: #fff;
font-family: 微軟雅黑;
font-size: 18px;
margin: 0 0 15px 0;
}
</style>
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM