vue-cli 引入百度地图

1：密钥（ak）地址

http://lbsyun.baidu.com/index.php?title=jspopular

2：在webpack.base.conf.js文件内添加external选项，在module.exports内部，和entry平级；

externals: {   "BMap": "BMap" }, 

3：项目中 index.html 引入js 脚本

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your token "></script>

4：创建组件BMapComponent

<template>  <!--地图容器-->  <div id="allmap" class="allmap"></div></template><script>export default {  name: '',  data() {    return {    }  },  mounted() {    // 百度地图API功能    var map = new BMap.Map("allmap"); // 创建Map实例    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的      }}</script><style scoped>html,body,.allmap {  height: 600px;}</style>

5：引入组件

import BMapComponent from '@/components/BMapComponent/BMapComponent';export default {  components: {    BMapComponent  }}</script>

6: 使用组件

<b-map-component></b-map-component>