vue项目引入原生jsAPI百度地图

一. 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

<!--vue-cli全局安装的bMap和这里加的不一样，这是原生js-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>

四.  baiduMap.vue

<style type="text/css">
  .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;
  }
</style>

<template>
  <div class="projectmap">
    <div class="title">项目分布图</div>
    <!--一定要加ref,才能在下面引用到，并且ref的内容必须为“allmap”-->
    <div id="allmap" ref="allmap"></div>
  </div>
</template>

<script>
 // 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() //初始化地图实例
    }

  }
</script>

效果图：