一. webpack.base.conf.js
externals: {
"BMap": "BMap"
}
二. main.js
import BMap from 'BMap' //全局注册,一定要放在vue下面
new Vue({
BMap,//挂载,非npm命令引入的组件,在这里挂在
router,
render: h => h(App)
}).$mount('#app')
三. index.html
<!--vue-cli全局安装的bMap和这里加的不一样,这是原生js-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
四. baiduMap.vue
<style type="text/css">
.projectmap{
height: 100%;
margin: 0px;
padding: 0px
}
#allmap {
width: 100%;
height: 800px;
}
.title{
height: 18px;
line-height: 18px;
color: #fff;
font-family: 微软雅黑;
font-size: 18px;
margin: 0 0 15px 0;
}
</style>
<template>
<div class="projectmap">
<div class="title">项目分布图</div>
<!--一定要加ref,才能在下面引用到,并且ref的内容必须为“allmap”-->
<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实例
//var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom("三亚", 15) // 初始化地图,地图默认中心
map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放
}
},
//需要初始化的东西放这里
mounted () {
this.map() //初始化地图实例
}
}
</script>
效果图: