<!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. PHPnow在win8下安装失败的解决办法

    提示: 安装服务[ Apache_pn ]失败,可能原因如下:1.服务名已存在,请卸载或使用不同服务名.2.非管理员权限,不能操作Window NT服务. 解决方案: 搜索:命令提示符   , 右键以 ...

  2. css3 filter属性在项目中的应用

    css3 属性filter应用在项目里. 语法: <filter>: 要使用的滤镜效果.多个滤镜之间用空格隔开. 设置或检索对象所应用的滤镜效果. 最常用的滤镜效果是不透明效果,如果要实现 ...

  3. ARM指令教程

    ARM指令教程 ARM汇编程序特点: l         所有运算处理都是发生通用寄存器(一般是R0~R14)的之中.所有存储器空间(如C语言变量的本质就是一个存储器空间上的几个BYTE).的值的处理 ...

  4. eclipse搭建servlet项目

    1.创建web项目 2.勾选Generate web.xml 3.创建Class文件并实现Servlet接口 当搜索Servlet接口时,如果未发现接口则Add library→选择tomcat版本至 ...

  5. windows 下面安装npm

    npm(简称:Node Packaged Modules)是nodejs官方未nodejs定制的一个工具,是Node.js的包管理器,通过npm可以下载安装nodejs的模块包,nodejs有很多优秀 ...

  6. event.target指向谁？

    学习中,有时遇到event.target,总是不明白为什么要用target,后来学习了下,大概了解了event.target到底指什么元素了,关于event和this的内容,下回再说: 先摆结论:ev ...

  7. Iso-Seq学习

    SMRT portal安装教程: http://www.pacb.com/wp-content/uploads/2015/09/SMRT-Analysis-Software-Installation- ...

  8. PHP character garbled

    MySql  控制台查询时出现乱码 Database&Table 的字符集 于Mysql控制台显示的字符集不一样 右键单击mysql控制台边框  单击属性  查看当前代码页的字符集模式是否于数 ...

  9. Spring 的 NamedParameterJdbcTemplate（转）

    NamedParameterJdbcTemplate类是基于JdbcTemplate类,并对它进行了封装从而支持命名参数特性. NamedParameterJdbcTemplate主要提供以下三类方法 ...

  10. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...