html 引用百度地图,vue引用百度地图

1. index.html

2. webpack.conf.js 与entry，output平级

externals: {

'BMap': 'BMap'// 地图引用

},

3.单页面应用

{{this.province}}-{{this.city}}

import { Toast } from 'vant';

export default {

data(){

return{

province:this.$route.query.id2,

city:this.$route.query.id

}

},

mounted(){

this.BaiduMap()

},

methods:{

BaiduMap(){

var map = new BMap.Map('allmap');

map.centerAndZoom(this.city);

// 覆盖区域图层测试

map.addTileLayer(new BMap.PanoramaCoverageLayer());

}

}

}

.map{

h4{

text-align: center;

padding: 10px 0;

}

}

>>>.anchorBL,

>>>.anchorTR,

>>>.BMap_zlHolder{// 隐藏百度logo

display: none;

visibility: hidden;

}

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{width:100%;height:500px;}

亲测有效，效果图~