1. 在 public/index.html 中引入百度地图
<!--引入百度地图--> <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script>
2. 在 vue.config.js 中配置 BMap
module.exports = { configureWebpack: { externals: { "BMap": "BMap", }, }, }
3. 在 .vue 文件中引入 BMap
import BMap from 'BMap'
4. 在 .vue 文件中绘制地图
<div id="myMap" style="height: 400px"></div>
mounted(){ var map = new BMap.Map("myMap"); // 创建Map实例 map.centerAndZoom("上海",15); // 初始化地图,用城市名设置地图中心点 },