vue3 数据可视化大屏 开发中，有个要求，地图要可以实现测距，搜索了一下高德地图支持这个功能，将实现方法记录一下。

演示实例

引入高德地图

<script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=your key&plugin=AMap.Geocoder,AMap.RangingTool"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

测距需要使用AMap.RangingTool 所以要引入AMap.RangingTool

代码

<template>
  <div class="maps">
    <div class="info">
      <span class="infoTitle">测距</span>
      <el-switch v-model="ceju"/>
    </div>
    <div ref="allmap" class="bodymap"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      map: null,
      ceju: false,
      ruler1: null,
      type: -1,
    }
  },
  components: {},
  created() {

  },
  watch: {
    type() {
      if (this.type != -1) {
        store.changeItemIndex(this.type)
      }
      this.ceju = false
      this.getGdMap()
    },
    ceju() {
      if (this.ceju) {
        this.ruler1.turnOn()
      } else {
        this.ruler1.turnOff()
      }
    }
  },

  mounted() {
    this.getGdMap()
  },
  methods: {
    // 高德地图相关
    getGdMap() {
      var that = this;
      that.map = new AMap.Map(this.$refs.allmap, {
        scrollWheel: true,
        viewMode: '2D',
        resizeEnable: true,
        zoom: 13,
        maxZoom: 30,
        minZoom: 0,
        center: [121.22989570399066, 31.02782839832306],
      });
      //自定义样式
      var startMarkerOptions = {
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31),//图标大小
          imageSize: new AMap.Size(19, 31),
          image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
        })
      };
      var endMarkerOptions = {
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31),//图标大小
          imageSize: new AMap.Size(19, 31),
          image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
        }),
        offset: new AMap.Pixel(-9, -31)
      };
      var midMarkerOptions = {
        icon: new AMap.Icon({
          size: new AMap.Size(19, 31),//图标大小
          imageSize: new AMap.Size(19, 31),
          image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
        }),
        offset: new AMap.Pixel(-9, -31)
      };
      var lineOptions = {
        strokeStyle: "solid",
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 2
      };
      var rulerOptions = {
        startMarkerOptions: startMarkerOptions,
        midMarkerOptions: midMarkerOptions,
        endMarkerOptions: endMarkerOptions,
        lineOptions: lineOptions
      };
      this.ruler1 = new AMap.RangingTool(this.map, rulerOptions);
    },
  },
  filters: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap {
  width: 100%;
  height: 100%;
  position: relative;
}

.maps {
  width: 100%;
  height: 100%;
  position: relative;

  .info {
    position: absolute;
    right: 20px;
    top: 20px;
    height: 60px;
    z-index: 100;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    background: rgba(8, 31, 66, 1.00);
    border-radius: 5px;

    .el-input {
      background: rgba(10, 32, 68, 1.00);
      border: 1px solid rgba(1, 119, 255, 1.00);
      //.el-input__wrapper{
      //  background: rgba(61, 131, 198, 1.00);
      //}
    }

  }
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: none !important;
}

.gdPopWin {
  background: rgba(9, 31, 67, 1.00);
  width: 400px;
  height: auto;
  min-height: 200px;

  p {
    line-height: 30px;
    color: #fff;
    font-size: 14px;
  }

  h4 {
    font-size: 16px;
  }
}

.amap-info-content {
  background: rgba(10, 31, 67, 1.00);
}

.middle-left .amap-info-sharp {
  border-right: 8px solid rgba(10, 31, 67, 1.00);
}

.markerlnglat {
  img {
    width: 40px;
  }
}

.infoTitle {
  margin-left: 20px;
  margin-right: 20px;
}

.amap-ranging-label span {
  color: #000;
}

</style>