高德地图Web中级

概述

    当我们在使用复杂功能的时候,需要使用到高德地图所有的插件,如量尺、卫星图等 地图详细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.