<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>编辑折线、多边形、圆</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>

<body>

<div id="container"></div>

<div class="button-group">

    <input type="button" class="button" value="开始编辑折线" onClick="editor.startEditLine()"/>

    <input type="button" class="button" value="结束编辑折线" onClick="editor.closeEditLine()"/>

    <input type="button" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>

    <input type="button" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>

    <input type="button" class="button" value="开始编辑圆" onClick="editor.startEditCircle()"/>

    <input type="button" class="button" value="结束编辑圆" onClick="editor.closeEditCircle()"/>

</div>

<script>

    var editorTool, map = new AMap.Map("container", {

        resizeEnable: true,

        center: [116.403322, 39.900255],//地图中心点

        zoom: 13 //地图显示的缩放级别

    });

    //在地图上绘制折线

    var editor={};

    editor._line=(function(){

        var lineArr = [

            [116.368904, 39.913423],

            [116.382122, 39.901176],

            [116.387271, 39.912501],

            [116.388258, 39.904600]

        ];

        return new AMap.Polyline({

            map: map,

            path: lineArr,

            strokeColor: "#FF33FF",//线颜色

            strokeOpacity: 1,//线透明度

            strokeWeight: 3,//线宽

            strokeStyle: "solid"//线样式

        });

    })();

    editor._polygon=(function(){

        var arr = [ //构建多边形经纬度坐标数组

        [116.403322,39.920255],

        [116.410703,39.897555],

        [116.402292,39.892353],

        [116.389846,39.891365]

        ]

        return new AMap.Polygon({

            map: map,

            path: arr,

            strokeColor: "#0000ff",

            strokeOpacity: 1,

            strokeWeight: 3,

            fillColor: "#f5deb3",

            fillOpacity: 0.35

        });

    })();

    editor._circle=(function(){

        var circle = new AMap.Circle({

            center: [116.433322, 39.900255],// 圆心位置

            radius: 1000, //半径

            strokeColor: "#F33", //线颜色

            strokeOpacity: 1, //线透明度

            strokeWeight: 3, //线粗细度

            fillColor: "#ee2200", //填充颜色

            fillOpacity: 0.35//填充透明度

        });

        circle.setMap(map);

        return circle;

    })();

    map.setFitView();

    editor._lineEditor= new AMap.PolyEditor(map, editor._line);

    editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

    editor._circleEditor= new AMap.CircleEditor(map, editor._circle);

    editor.startEditLine=function(){

        editor._lineEditor.open();

    }

    editor.closeEditLine=function(){

        editor._lineEditor.close();

    }

    editor.startEditPolygon=function(){

        editor._polygonEditor.open();

    }

    editor.closeEditPolygon=function(){

        editor._polygonEditor.close();

    }

    editor.startEditCircle=function(){

        editor._circleEditor.open();

    }

    editor.closeEditCircle=function(){

        editor._circleEditor.close();

    }

</script>

</body>

</html>

AMap编辑折线、多边形、圆的更多相关文章

  1. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  2. PCB 铜皮(Surface)折线多边形扩大缩小实现(第一节）

    继续铜皮多边形的相关的算法, 如何用代码实现多边形的扩大与缩小,这部份内容准备分为四节内容来讲解, 第一节,折线多边形的扩大缩小(不包含圆弧)   此篇讲第一节 第二节,带圆弧的多边形的扩大缩小 第三 ...

  3. 【高德地图API】从头德国高中生JS API（三）覆盖物——大喊|折线|多边形|信息表|聚合marker|点蚀图|照片覆盖

    覆盖物,是一张地图的灵魂.有覆盖物的地图.才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具).最重要最必不可少的就是覆盖物了.覆盖物有多种.包含.标注.折线.多 ...

  4. 最全vue的vue-amap使用高德地图插件画多边形范围

    一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

  5. Canvas绘制不规则图形，实现可拖动，编辑--V1.0第一篇

    目前的工作在做在线的标注工具,接触canvas一年了,各种绘制,基本上图像的交互canvas都可以完成,也写了几篇关于canvas的文章,遇到的问题也写博客上了,对于canvas有问题的朋友可以去看看 ...

  6. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 【高德地图API】从零開始学高德JS API（二）地图控件与插件——測距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    不管是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发人员使用.降低开发人员工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,相似谷歌 ...

  8. iOS开发---集成百度地图完善版

    一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...

  9. 2014年3月份第1周51Aspx源码发布详情

    Graphics创建饼图示例源码  2014-3-7 [VS2010]源码描述:这个程序是一个在c#中使用图形类用来创建饼图,此程序是用Graphics 类的DrawPie() 和 FillPie() ...

随机推荐

  1. [C++] 自己实现快速memcpy

    仅在Win32上使用,Win64上不允许内嵌汇编= = __declspec(naked) void* __stdcall __memcpy ( __in void* Dest, // ebp+0x0 ...

  2. <转>人生与最速曲线

    看完你好象发现了什么o(∩_∩)o 来源网络 来自为知笔记(Wiz)

  3. RoR简单的应用程序

    在dos环境下执行找到需要新建的项目路径 输入命令rails -v #查看版本号

  4. 使用burpsuite抓android包

    1.让Android手机和PC连入同一个网段的wifi,即在同一个无线局域网环境下. 2. 查看PC的IP地址,cmd输入ipconfig命令 3.打开Burpsuite,设置Proxy Listen ...

  5. 电脑用miniDP链接显示器后电脑没声音

    今天用笔记本T440s miniDP 链接戴尔U2515显示器的 DP 连接后发现笔记本没声音了 原因: miniDP 不仅能支持视频传输还支持音频, 所以声音就改为从显示器发出了 但是我想让电脑输出 ...

  6. CLR via C# 3rd - 08 - Methods

       Kinds of methods        Constructors      Type constructors      Overload operators      Type con ...

  7. 测试cookie的读写

    js文件使用utf8编码 <p><img id="img" onclick="javascript:var s=document.createEleme ...

  8. angular使用echarts折线图

    echarts是开源的画图工具,在angular框架中引入echarts不能直接使用.需要新建一个directive //echarts基本参数 app.factory('$echartsConfig ...

  9. myeclipse打war包时，报错security alert integrity check error

    今天在用myeclipse打包项目时,出现如下图的提示: 在网上查找了一下原因,主要是由于Jar包不符合所导致的.解决办法如下: 将com.genuitec.eclipse.export.wizard ...

  10. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...