关于vue-baidu-map的一些记录

这一阶段主要的内容是负责编写和百度地图相关的信息。（写到我想吐）

仿照导航的页面效果。

1.使用说明

这里使用的是vue-baidu-map相关组件，这里我就不去说明如何去安装他们了，我们直接向下看。vue-baidu-map的操作手册的网址：Vue Baidu Map (dafrok.github.io)。当然我这里介绍的那些只是我所使用的，他们所拥有的的属性和方法可不止我这里写的那么一点点。

2.地图容器

<template>
    <!-- center表示的是加载地图的中心点，zoom则是地图的缩放等级 -->
  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  </baidu-map>
</template>

这里的center有两种写法：

• :center="{lng: 116.404, lat: 39.915}"

• center="北京"

这两种写法都能够让地图的中心处于北京，但是注意这里的坑，我初次以为这里的center是响应式的，实则并不是例如

<!-- 注意下面的写法有问题，不要这么写 -->
<template>
 <baidu-map class="map" :center="myPosition" :zoom="15">
  </baidu-map>
</template>
<script>
export default{
    date(){
        return{
            myPosition:{lng: 116.404, lat: 39.915}
        }
    }
}
</script>

对于平常而言，这样写代码不是很正常吗？但是在这里就不行，（至少我写的这个项目不行）。这里我们使用另外一种方式进行改变，就是@ready这个事件，在创建地图时会触发这个事件，而这个事件有参数分别是map实例对象，我们可以通过map实例对象来获取地图相关属性，同时可以通过创建BMap类来进行操作。

并且在之后的开发中，我们往往会遇到很多地方需要我们手动修改地图的默写属性，这里我推荐在data中创建空对象，将map和BMap分别保存到这两个对象中去，方便我们日后的操作，例如:

<template>
 <baidu-map @ready="mapReady" class="map" :center="myPosition" :zoom="15">
  </baidu-map>
</template>
<script>
export default{
    date(){
        return{
            map:{},
            BMap:{}
        }
    }
    
    method:{
    mapReady({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    },}
}
</script>

这么写的话也方便我们之后去使用相关的实例对象，当然网上也提供了另外一种写法，就是通过ref来获取map的实例对象，但是本人亲测还是认为上面的方法更好用一些。

现在我们获取了map和BMap，我们使用官方提供的方法centerAndZoom将中心点的经纬度和地图缩放等级的数据传进去，当然传入的数据需要进行一些处理

let shrink = 18;
let gps = [116.404,39.915]
let point = new BMap.Point(...gps);
map.centerAndZoom(point, shrink);

将上面代码触发之地图的中心点就会跳转到北京的位置，并且设置缩放等级为18.

3.点

他这里就叫做点，具体的使用方式是这样的

<!-- position表示的是点的相关位置, rotation表示的是这个点的相关角度，dragging表示这个点能不能拖动，icon表示的是这个点的图标和样式，z-index表示的是这个图标的层级 -->           
<bm-marker
            :position="currentPos"
            :rotation="currentRotation"
            :dragging="false"
            :icon="currentIcon"
            :zIndex="37000001"
          />

和上面的地图容器不同的是，这里的点的标签的相关属性都是响应式的（这个层级37000001不要管他），我们大可以直接去在data中修改他们的值。

此外这里的currentIcon是一个对象

currentIcon: {
        url: require("../../assets/images/currentIcon.png"),
        size: {
          width: 36,
          height: 36,
        },

上面的这个是一个例子，我们设置号这个点的背景图片和尺寸，然后就能够在地图中生成相应的点了，当然了，点的html代码要写在baidu-map标签中。

4.折线

折线使用方法比较复杂，先看他给的代码代码

<!-- 官方生成折线的方法 --> 
<bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline>

这里我放不出来公司的代码，因为他是使用BMap对象创建出来的，在他的代码中，没有涉及到这个折线的标签，为了能解释明白，我们还是按照标签的来。

生成线最重要的自然就是点，这个标签中的path属性所对应的值是一个数组，数组的内容则是一个点的经纬度{lng:currentLng,lat:currentLat}之类的对象，传入参数之后系统会根据数组的index顺序收尾相连（第一个元素和最后一个元素不连接）画出线段。

这里再说一个属性icons，当我们设置出来的线段上想要加上一些图标的时候，将图标的信息封装成数组传递进去如下面diamante所示

   var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.3, //图标缩放大小
        strokeColor: "#fff", //设置矢量图标的线填充颜色
        strokeWeight: "1", //设置线宽
        fillOpacity: 0.8,
      });
      var icons = new BMap.IconSequence(sy, "30px", "10%");
      this.icons.push(icons);

他这里设置的是矢量图标就是地图上画出路径之后，路径上面的箭头。

其他剩余的属性其实在文档上也可以查看到。

5.自定义覆盖物

由于官方本身提供的信息窗体实在是不怎么美观于是我们自己做信息窗体，这里用到了自定义覆盖物（遇到的最烧脑的一个标签）

<baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  <bm-overlay
    pane="labelPane"
    :class="{sample: true, active}"
    @draw="draw"
    @mouseover.native="active = true"
    @mouseleave.native="active = false">
    <div>我爱北京天安门</div>
  </bm-overlay>
</baidu-map>
​
<script>
export default {
  data () {
    return {
      active: false
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>
​
<style>
.sample {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>

首先我这里说一下关于这个标签的位置如何确定，我们不看他封装后的代码，就看单独使用这个标签，它本身是没有控制位置的属性的，那么怎样才能让这个标签跟随汽车的变化而变化呢？是使这个标签本身所提供的draw这个事件中的来确定覆盖物在地图中的位置，然后就是css，这里一定要注意给标签设置绝对定位，这样才能让标签在地图显示在想要的位置。

然而上述代码完成之后我们发现这个覆盖物在地图中的位置是定死的，假如我现在在写导航，小车的位置发生改变，怎么让这个覆盖物的位置也发生改变呢？

    draw({ el, BMap, map }) {
      const { lng, lat } = this.currentPos;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 170 + "px";
      el.style.top = pixel.y - 140 + "px";
    },

首先让我们先获取这个动点，随后，当我们的点发生变化之后执行

this.$refs.customOverlay.reload();重新加载覆盖物，就能够让覆盖物动起来了。

最后如果想要修改覆盖物的样式直接在这个标签里写div就可以了。

6.标签

看代码

<bm-label content="我爱北京天安门" :position="{lng: 116.404, lat: 39.915}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me"/>

这个标签的难度就不是很大了，label本身自带position属性，当然也是不能动态修改位置的，但是它相对好的点是，可以写在其他能动的标签中，跟随其他元素在地图中移动。

那么既然解决了动的问题，剩下的就是样式的解决了，他自己本身的样式都是写在style里的，所以改起来，改加v-deep，还是！important阁下就慢慢试吧。

总结：

本次真的是写吐了，各种各样的问题和层出不穷的，个人认为他的组件不是响应式的就是最大的败笔，本人属于急性子，再加上粗心大意，在编写的时候一度将讯飞星火问到需要加载10几秒的情况。