本文介绍了如何在Vue项目中引入并使用原生JavaScript API，特别是百度地图。通过修改webpack配置，设置externals来引入BMap，然后在main.js中全局注册并挂载。在组件中定义地图相关的方法，例如创建Map实例，设置中心点和缩放级别，并在组件的mounted钩子中调用这些方法以初始化地图。最终展示了成功集成后的效果。
一. 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
四. baiduMap.vue
.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;
}
项目分布图
// 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() //初始化地图实例
}
}
效果图：
扫一扫
4209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
