高德地图 Javascript API 入门（二）

dockerclub 发布于2019-08-20 14:29 / 2066人阅读

摘要：鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。参数设为时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时，保留所绘制的覆盖物对象。

高德地图 Javascript API 入门（二） 鼠标工具插件 测量距离

    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();
    });

预览

全部功能

方法	返回值	说明
`marker( options：MarkerOptions)`		开启鼠标画点标注模式。鼠标在地图上单击绘制点标注，标注样式参考MarkerOptions设置
`polyline( options：PolylineOptions)`		开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制，折线样式参考PolylineOptions设置
`polygon( options：PolygonOptions)`		开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制，多边形样式参考PolygonOptions设置
`rectangle( options：PolygonOptions)`		开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置
`circle( options：CircleOptions)`		开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置
`rule( options：PolylineOptions)`		开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。量测线样式参考 PolylineOptions 设置注：不能同时使用rule方法和RangTool插件进行距离量测
`measureArea( options：PolygonOptions)`		开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。量测面样式参考PolygonOptions设置
`rectZoomIn( options：PolygonOptions)`		开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置
`rectZoomOut( options：PolygonOptions)`		开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置
`close( Boolean)`		关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为false

#### 自定义覆盖物样式（以折线为例 Polyline） JS

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

更多详细参数参考 http://lbs.amap.com/api/javascript-api/reference/overlay#PolylineOptions

预览

参考来源：http://lbs.amap.com/
作者：Yangfan

GPU云服务器云服务器高德地图api接口高德地图api接口文档高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81680.html

高德地图 Javascript API 入门（一）

摘要：高德地图入门一准备工作首先注册个开发者账号然后创建应用，获取新建文件，在标签中引入如下代码把你的值填入即可您申请的值创建设置地图容器地图初始化创建地图设置地图参数可以通过以下设置也可通过对象的方法设置预览个性化地图改变地图样式目前支持五种地高德地图 Javascript API 入门（一）准备工作首先注册个开发者账号 showImg(https://segmentfault.co...

jone5679 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（七）

摘要：高德地图入门七热力图插件简单例子显示地图坐标点加载热力图插件预览参数构造函数说明构造一个热力图插件对象，为要叠加热力图的地图对象，属性参考列表中的说明。高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....

YuboonaZhang 2019-08-21 11:31 评论0 收藏0
高德地图 Javascript API 入门（六）

摘要：高德地图入门六出行规划公交路径公交换乘服务，提供起终点公交路线规划服务，整合步行方式初始化加载公交线路插件实例化北京必须值，搭乘公交所在城市可选值，搜索结果的标注线路等均会自动添加到此地图上可选值，显示搜索列表的容器可选值，详细信息驾驶策略高德地图 Javascript API 入门（六）出行规划公交路径公交换乘服务，提供起、终点公交路线规划服务，整合步行方式初始化 // 加...

idisfkj 2019-08-20 14:39 评论0 收藏0
高德地图 Javascript API 入门（三）

摘要：高德地图入门三距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。高德地图 Javascript API 入门（三）距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。加载插件 JS map.plugin([AMap.RangingTool],function () { ...

EdwardUp 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（四）

摘要：高德地图入门四地图覆盖物覆盖物类名说明是否插件点标记否覆盖物点标记复杂点标记对象，对普通点标记的扩展否覆盖物折线否覆盖物多边形否覆盖物圆否图片覆盖物否地图右键菜单否点标记预览自定义点标记预览多边形预览右键菜单添加右键菜单内容项放大缩小添加高德地图 Javascript API 入门（四）地图覆盖物覆盖物类名说明是否插件 AMap.Marker 点标记否 AM...

AlanKeene 2019-08-20 14:29 评论0 收藏0