vue-amap 高德地图中使用测距插件

前言：高德地图的测距插件，可能由于项目配置不同，导致使用插件失败。这里只是作为记录，以便后续翻查，如有问题也欢迎留言，大家一起研究

 

第一步：

    -- 在main.js中配置你所需要使用的插件

    -- VueAMap.initAMapApiLoader({
           key: '这里是你申请的key',
           plugin: [
             'AMap.Scale',
             'AMap.OverView',
             'AMap.ToolBar',
             'AMap.MapType',
             'Geolocation',
             'AMap.Autocomplete',
             'AMap.PlaceSearch',
             'AMap.RangingTool'  // 这个就是测距插件
           ],
           v: '1.4.15'
         })

 

第二步：

      --<el-amap :events="mapEvents"  ></<el-amap>  // 赋值事件

      -- data () {

             const self = this

             return {

                 mapRuler: {},
                 mapEvents: {
                        init(map) {
                            const ruler = new window.AMap.RangingTool(map)  // 初始化插件
                            self.mapRuler = ruler
                         }
                    }

             }

        }

 

第三步：

      -- 在methods 中调用事件  this.mapRuler.turnOff() // 打开测距  this.mapRuler.turnOn() // 关闭测距