高德地图水波纹覆盖物+点击覆盖物切换弹窗显示与隐藏

隔了一段时间又做地图案例，还是会陌生。

今天写的时候遇到一个乌龙事件，花了我很多时间去找原因，研究写法，最后才发现只要改一个地方，改个数值就能搞定。真是又气又懊恼

我在高德api里拾取坐标后，高德坐标拾取，请戳这里，在自己项目里位置始终有偏差，为了找到偏差的原因，研究了很久。最后才发现是offset偏移量设的太多，改小数值后，果然精准了。大家勿要踩坑呀

还有 position: [_data[1].longitude, _data[1].latitude] 格式要这样才行

效果如下：圆形覆盖物有水波纹的效果，页面刚渲染的时候显示弹窗。点击覆盖物隐藏和显示对应的弹窗

话不多说，上代码

<template>
    <div>
      <div id="ccontainer">
      </div>
    </div>
</template>

data() {
    return {
      cpInfo: {
        zoom: parseInt(12),
        provinceid: parseInt(32),
        center: [parseFloat(xxx), parseFloat(xxx)]
      },
      marknewFlag1: false,
      marknewFlag2: false
    }
  },

 mounted() {
    this.init1()
  },

methods: {
    init1() {
      const This = this
      //实例化地图
      const map = new AMap.Map('ccontainer', {
        resizeEnable: true,
        zoom: This.cpInfo.zoom,
        zooms: [3, 17],
        mapStyle: 'amap://styles/blue', 默认地图样式(normal)
        center: This.cpInfo.center
      })
      map.setDefaultCursor('crosshair')
      This.map = map
      This.AMap = AMap
      let mockData = [
        { longitude: 'xxx', latitude: 'xxx' },
        { longitude: 'xxx', latitude: 'xxx' },
        { longitude: 'xxx', latitude: 'xxx' },
        { longitude: 'xxx', latitude: 'xxx' }
      ]
      this.map.on('complete', () => {
        this.addMarker(mockData)
      })
    },
    //实例化marker
    addMarker(_data = []) {
      let me = this
      let height = 2.4   
      // 点标记显示内容，HTML要素字符串
      var markerContent1 = `
            <div
            class="circle-marker-content"
            >          
              <div class="item item1"
              style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item2" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item3" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item4" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item5" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
            </div>`
      var markerContent2 = `
            <div
            class="circle-marker-content"
            >        
              <div class="item item1"
              style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item2" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item3" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item4" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
              <div class="item item5" style='
              height:${height}vh;
              width:${height}vh;
              '></div>
            </div>`
      // 左边圆点
      var markerContent3 =
        '' +
        '<div class="custom-content-marker">' +
        '  <div class="cuntom-span-marker2" ><span >车牌号码：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >车牌颜色：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >车型：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >路段名称：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >起始桩号：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >终止桩号：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >平均车速：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >违法行为：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >超速时间：</span>文字自己编辑' +
        '</div>' 
        +'</div>'
      // 右边圆点
      var markerContent4 =
        '' +
        '<div class="custom-content-marker">' +
        '  <div class="cuntom-span-marker2" ><span >车牌号码：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >车牌颜色：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >车型：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >路段名称：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >起始桩号：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >终止桩号：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >平均车速：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >违法行为：</span>文字自己编辑' +
        '</div>' +
        '  <div class="cuntom-span-marker2" ><span >超速时间：</span>文字自己编辑' +
        '</div>' 
        +'</div>'
      var marker1 = new AMap.Marker({
        position: [_data[0].longitude, _data[0].latitude], //右边红点
        // 将 html 传给 content
        content: markerContent1,
        clickable: true,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-3, -3)
      })
      var marker2 = new AMap.Marker({
        position: [_data[1].longitude, _data[1].latitude], //左边红点
        content: markerContent2,
        clickable: true,
        offset: new AMap.Pixel(-3, -3)
      })
      var marker3 = new AMap.Marker({
        position: [_data[2].longitude, _data[2].latitude], //右边红点弹窗
        content: markerContent3,
        clickable: true,
        offset: new AMap.Pixel(-3, -3)
      })
      var marker4 = new AMap.Marker({
        position: [_data[3].longitude, _data[3].latitude], //左边红点弹窗
        content: markerContent4,
        clickable: true,
        offset: new AMap.Pixel(-3, -3)
      })
      marker1.on('click', function(e) {
        if (me.marknewFlag1) {
          me.marknewFlag1 = false
          me.map.add(me.mapmarker3)
        } else {
          me.marknewFlag1 = true
          me.map.remove(me.mapmarker3)
        }
      })
      marker2.on('click', function(e) {
        if (me.marknewFlag2) {
          me.marknewFlag2 = false
          me.map.add(me.mapmarker4)
        } else {
          me.marknewFlag2 = true
          me.map.remove(me.mapmarker4)
        }
      })
      me.mapmarker1 = marker1
      me.mapmarker2 = marker2
      me.mapmarker3 = marker3
      me.mapmarker4 = marker4
      // 将 markers 添加到地图
      me.map.add(me.mapmarker1)
      me.map.add(me.mapmarker2)
      me.map.add(me.mapmarker3)
      me.map.add(me.mapmarker4)
     
    }
  }
}

<style lang="less">
@circleColor: #ff2900;
#ccontainer {
  width: 100%;
  height: 580px;
}
.circle-marker-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.8vh;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  text-align: center;
  background: @circleColor;
  border: 1px solid @circleColor;
  box-shadow: 0px 0px 14px @circleColor;

  .item_count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1c77c3;
    font-weight: bold;
    font-size: 13px;
    z-index: 10;
  }

  @keyframes scaless {
    0% {
      transform: scale(0);
      opacity: 1;
    }

    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .item {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item:before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid @circleColor;
    border-radius: 100%;
    opacity: 0;
    background-color: @circleColor;
    animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }

  .item1:before {
    animation-delay: 0s;
  }

  .item2:before {
    animation-delay: 1s;
  }

  .item3:before {
    animation-delay: 2s;
  }

  .item4:before {
    animation-delay: 3s;
  }

  .item5::before {
    animation-delay: 4s;
  }
}
.custom-content-marker {
  width: 210px;
  height: 170px;
  font-size: 12px;
  background: #0B1517;
  color: #fff;
  padding-left: 10px;
}
</style>