接入流程:
1: 在Vue创建的项目里找到index.html的文件,在index.html文件里添加。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=GfVXTzuM2GCyjrqk1joXN8oN"></script>
2.在需要添加地图的模块里创建百度地图。
<div class='mapbox' id='allMap'></div>
<script>
var goodsData = require('../../assets/custom_map_config') //导入设置好的主题颜色 如果不需要,可以不做此操作
baiduMap: function () {
// eslint-disable-next-line
var map = new BMap.Map('allMap')
// eslint-disable-next-line
var point = new BMap.Point(116.404, 39.915)
map.centerAndZoom(point, 12)
map.enableScrollWheelZoom(true)
map.setMapStyleV2({styleJson: goodsData}) // 使用导入的主题样式
}
</scropt>

默认的不添加样式

Vue项目中百度地图组件集成
本文详细介绍了如何在Vue项目中集成百度地图组件,包括在index.html中引入地图API,以及在具体模块中创建并配置地图的方法。通过示例代码展示了如何设置地图的中心点和缩放级别,并应用自定义的主题样式。
1万+





