高德地图api汇总（二）插件的使用

最新推荐文章于 2024-08-24 11:39:52 发布

小时候可俊了啊

最新推荐文章于 2024-08-24 11:39:52 发布

阅读量4k

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46338965/article/details/122882483

版权

地图自带的插件；使用方法如下

 //   添加地图插件
        map.plugin(["AMap.ToolBar"], function () {
          map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
        });
        map.plugin(["AMap.Scale"], function () {
          map.addControl(new AMap.Scale()); // 比例尺条控件
        });
        map.plugin(["AMap.Geolocation"], function () {
          map.addControl(new AMap.Geolocation()); //定位当前位置插件； 用来获取和展示用户主机所在的经纬度位置；
        });
        map.plugin(["AMap.OverView"], function () {
          map.addControl(new AMap.OverView()); //鹰眼插件；在地图右下角显示地图的缩略图
        });
        map.plugin(["AMap.MapType"], function () {
          map.addControl(new AMap.MapType()); //实现默认图层与卫星图、实施交通图层之间切换的控件
        });

以上插件显示效果如下图：

以下为鼠标工具插件；需要用户点击鼠标左键；自行绘制

// 鼠标工具插件
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.rule();
      });//用户手动绘制折线图，测量距离

map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.measureArea();
      });//测量面积


//绘制点标注
map.plugin(["AMap.MouseTool"],function () {
	var mouseTool=new AMap.MouseTool(map);
	mouseTool.marker();
});

//   绘制折线
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.polyline();
      });

/绘制多边形
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.polygon();
      });

// 绘制矩形
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.rectangle();
      });

// 绘制圆
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.circle();
      });

//自定义覆盖物；以折线为例
      map.plugin(["AMap.MouseTool"], function () {
        var mouseTool = new AMap.MouseTool(map);
        mouseTool.polyline({
          strokeColor: "#f50", // 线条颜色，十六进制
          strokeOpacity: 0.5, // 线条透明度
          strokeWeight: 10, // 线条宽度
          strokeStyle: "dashed", // 线条样式 solid || dashed
        });
      });