百度地图 —— vue引入百度地图及控件问题

最近公司的一个项目到来了，百度地图的引入以及对车辆轨迹的查看、纠偏等需求是这项目的重中之重，之前对百度地图不熟悉，踩了不少坑，希望通过分享，能助迷茫的兄弟一臂之力。在此之前，先放出两个有帮助的网站：百度地图实例 ， Vue Baidu Map

引入百度地图

npm install vue-baidu-map –save

在index.html中添加 script
至于ak秘钥，需要自己申请下，这里不多说这个了（可以先使用我的）

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

在对应的页面加入百度地图容器（必须设置宽高）

<div id="map" style="width:1000px;height:600px;">
   <div id="allmap" class="allmap"></div>
</div>

在webpack.base.conf.js中引入externals（与entry同级），如下

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  // 添加如下
  externals: {
    'BMap': 'BMap',
    'BMapLib': 'BMapLib'
  }，
  ... 
 }

生成地图

下面我们就要在页面中生成地图，第一步，添加一个方法 initMap()

// 初始化地图
    initMap () {
      const self = this
      const map = new BMap.Map('allmap')
      // 创建点坐标
      const point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(point, 5)
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      // 鱼骨图
      map.addControl(new BMap.NavigationControl())
      // 创建信息窗口
      const infoWindow = new BMap.InfoWindow()
      map.openInfoWindow(infoWindow)
      // 添加地图类型控件（右上角）
      map.addControl(
        new BMap.MapTypeControl()
      )
      // map.addControl(new BMap.CityListControl()) // 城市列表
      // var size = new BMap.Size(10, 20);
      self.mapObj = map
    }

必须要在mounted后使用，否则不生效

mounted () {
    // 地图初始化
    this.initMap()
}

然后运行后，发现一个问题，那就是BMap 为定义，所以我们需要引入这些地图实例

import BMap from 'BMap' 
import BMapLib from 'BMapLib' // 需要使用可以引入

下面就可以了

地图控件问题

但是如果这是你想添加地图控件，例如左上角的比例，右上角的地图类型

根据官方示例

// 此为地图类型控件
var mapType1 = new BMap.MapTypeControl(
		{
			anchor: BMAP_ANCHOR_TOP_LEFT  // 控件的定位 左上角 还有其他
		}
	);
map.addControl(mapType1); 

运行后，你会发现 BMAP_ANCHOR_TOP_LEFT 又是未定义，蒙了吧？
没有！！！很简单，还是之前的操作，在webpack.base.conf.js中，在加上它（谁未定义就加谁）

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals: {
    'BMap': 'BMap',
    'BMapLib': 'BMapLib',
    'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT', // 自定义覆盖物
    'BMAP_ANCHOR_TOP_LEFT': 'BMAP_ANCHOR_TOP_LEFT' // 控件位置
  },
  ...
 } 

然后再到页面引入

import BMAP_ANCHOR_TOP_LEFT from 'BMAP_ANCHOR_TOP_LEFT' 

那就妥妥的没问题了~~~~~

全局引入百度地图

虽然引入还有另一种方法，在全局引入，但是本人还是更偏向这种,在这里我也简单说下流程：
1、npm安装后

npm install vue-baidu-map –save

2、在main.js中全局引入

// 引入百度地图
import BaidiMap from 'vue-baidu-map'

Vue.use(BaidiMap, {
  ak: 'Za2zY66a011Qd4IikmHCoGK3TgxxmzOD'
})

3、页面调用（根据需求定你的地图内容）

<!-- 引入地图 -->
    <baidu-map
      :center='center'
      :zoom='zoom'
      @ready='handler'
      style='height:91vh;width:100vw;position: absolute;margin-top:60px;'
      @click='getClickInfo'
      :scroll-wheel-zoom='true'
      id='allmap'
    ></baidu-map>

4、然后在handler方法中，直接引入参数BMap

// 引入地图
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
      // s3
      map.addControl(new BMap.ScaleControl()) // 添加比例尺
      map.addControl(
        new BMap.MapTypeControl()
      )
      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl()
      map.addControl(navigationControl)
      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl()
      geolocationControl.addEventListener('locationSuccess', function (e) {
      // 定位成功事件
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        alert('当前定位地址为：' + address)
      })
      geolocationControl.addEventListener('locationError', function (e) {
      // 定位失败事件
        alert(e.message)
      })
      map.addControl(geolocationControl)
 }

总结

这两种方法也是查阅了多数文章才得出，百度地图中的api还有很多，功能真的牛，公司项目正在进行中，在制作轨迹demo中，也踩了好几个坑，如果需要也会在后续写出。

文章有什么错误的地方，望告知，谢谢~~