在vue中使用 百度地图

    本篇文章主要讲述, 如何在vue项目中集成百度地图

    1.首先找到你项目底下的index.html入口文件,这个根据不同的版本,所以存在的位置是不同的,具体如下:

      a.路径如下: 项目名/public/index.html

         

 

     b.路径如下:   项目名/index.html

    

     找到index文件后,导入百度地图:  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

 

    2.接着到你想要使用地图的页面中,写地图的容器,代码如下:

     

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px;"></div>
  </div>
</template>

  注意容器的id,以及要给容器设置固定的高度,否则地图出不来

    3.接着导入script模块的代码,具体如下:

<script>
export default {
  name: 'Dashboard',
  data(){
    return {
    }
  },
  mounted(){
    this.createMpa()
  },
  methods:{
    createMpa(){
         // GL版命名空间为BMapGL
        // 按住鼠标右键，修改倾斜角和角度
	     var map = new BMapGL.Map("allmap");    // 创建Map实例
	    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
     }
  }
}
</script>

    注意此处的代码需要在组件挂在完成之后再创建地图, 注意vue的生命周期

     这个时候运行你的代码,地图就引入成功了

     希望对你有所帮助,有问题欢迎指正!!!