高德地图Web中级_amap rangingtool m-CSDN博客

本文深入探讨了高德地图API的使用方法，包括如何引入测距工具插件和实现地图监听功能。通过具体示例，展示了如何在项目中有效利用高德地图的所有插件，如量尺、卫星图等，以及如何处理地图变化事件，如鼠标移动和点击。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

当我们在使用复杂功能的时候,需要使用到高德地图所有的插件,如量尺、卫星图等地图详细API

插件引入

插件引入的方式由两种,一种是直接在script中直接增加工具,一种是在异步加载. 插件传送门

&plugin=AMap.RangingTool(引入测距工具)

    https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.RangingTool

异步引入测距工具

    //创建实例
    let mAmapInstance = new AMap.Map('element_container_id', {
                    resizeEnable: true,
                    zoom: 10,
                    lang: 'ch",
                });
    //引入测距工具            
    let mRangingToolTools=null;
    AMap.plugin(['AMap.RangingTool'], function () {
                    mRangingToolTools = new AMap.RangingTool(mAmapInstance,{});
                });
    mAmapInstance.addControl(mRangingToolTools);

地图监听

当我们在使用插件的时候,同时也需要监听地图的变化,如鼠标移动,鼠标点击等.事件传送门

	//移除监听
    AmapFeature.off('mousemove', function mousemove(e) {});
    AmapFeature.off('click', function click(e) {});
    AmapFeature.off('dblclick', function dblclick(e) {});
    AmapFeature.off('rightclick', function rightclick(e) {});
	//添加监听
	AmapFeature.on('mousemove', function mousemove(e) {});
    AmapFeature.on('click', function click(e) {});
    AmapFeature.on('dblclick', function dblclick(e) {});
    AmapFeature.on('rightclick', function rightclick(e) {});

测量工具

	//在使用测量尺测量工具的时候,监听地图的双击事件中去关闭测量尺,没有任何效果!
	mouseTool.turnOff();//关,没有起作用
	mouseTool.turnOn();//开
	//解决方案:
	//监听一个值的状态,在watch中处理测量工具的开关

结束语

高德地图的功能由很多,需要我们多去实践,多看相应的API.