没有测距工具吗

[xiawnag]

没有测距工具吗

VueAMap 版本

OS/Browsers version

Vue 版本

复现地址

预期

实际

feature request

[Leega0]

自己拿到map实例，可以直接使用高德的测距api

[Wpcc]

如果你是根据npm安装vue-amap，那么需要以下步骤才能使用测距工具：

• 在 script 文件中引用 lazyAmapApiLoaderInstance

  import { lazyAMapApiLoaderInstance } from 'vue-amap'
  

• 在 data 中重新定义 this ，并使用 init 调用 lazyAmapApiLoaderInstance

  data(){
      var me = this
      return {
          events:{
              init:(o) => {
                  lazyAMapApiLoaderInstance.load().then(() => {
                      AMap.plugin([
                          'Amap.RangingTool' // 引入测距插件
                      ]),
                      function(){
                          // 创建测距实例
                          const ruler = new Amap.RangingTool(o)
                          // 赋值给vue组件
                          me.mapRuler = ruler
                      }
                  })
              }
          }
      }
  },
  methods:{
      turnRuler(){ 	 // 定义方法，是否开启测距工具
          this.mapRuler.turnOn() // 开启:turnOn() 关闭：turnOff()
      }
  }
  

• template 中定义DOM节点绑定事件

  <template>
   <el-button @click="turnRuler">开启测距工具</el-button>
  </template>
  

• 高德地图测距工具API