<!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. 易图软件之EaseMap Desktop 1.0发布

    概述 易图软件之EaseMap Desktop 1.0是一款基于arcgis runtime for wpf开发的地图编辑软件. 软件代码编写历时1个月终于完成. 目前这个版本的功能包括: 地图基本操 ...

  2. 图片上传安全性问题，根据ContentType (MIME) 判断其实不准确、不安全

    图片上传常用的类型判断方法有这么几种---截取扩展名.获取文件ContentType (MIME) .读取byte来判断(这个什么叫法来着?).前两种都有安全问题.容易被上传不安全的文件,如木马什么的 ...

  3. [转]const 与 readonly知多少

    引自:http://www.cnblogs.com/royenhome/archive/2010/05/22/1741592.html 尽管你写了很多年的C#的代码,但是可能当别人问到你const与r ...

  4. linux命令行将已有项目提交到github

    之前用git是在windows下用git的图形化界面进行操作的,这次有一个写了几天的小项目想提交到git上,linux命令行下面没有图形化的界面,所以全部需要git命令来操作. 实践之后,主要是下面几 ...

  5. 从AutoCAD和.NET开始

    引自并参考Kean's blog:http://through-the-interface.typepad.com/through_the_interface/2006/07/getting_star ...

  6. iOS 动态下载系统提供的中文字体

    使用系统提供的中文字体,既可避免版权问题,又可以减小应用体积 #pragma mark - 判断字体是否已经被下载 - (BOOL)isFontDownLoaded:(NSString *)fontN ...

  7. 【转】Alchemy的使用和多项式批量计算的优化

    原文:http://www.cnblogs.com/flash3d/archive/2012/01/30/2332158.html ================================== ...

  8. 实现TCP、UDP相互通信及应用

    实验名称  Socket编程综合实验(1) 一.实验目的: 1.理解进程通信的原理及通信过程 2.掌握基于TCP和UDP的工作原理 3.掌握基本的Socket网络编程原理及方法 二.实验内容 1.掌握 ...

  9. Laravel框架数据库CURD操作、连贯操作使用方法

    Laravel框架数据库CURD操作.连贯如何来操作了这个操作性是非常的方便简单了我们在这里来为各位介绍一篇相关的教程,具体的细节步骤如下文介绍．   Laravel是一套简洁.优雅的PHP Web开 ...

  10. 面试题---PHP

    1.PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言. 2.echo,print和print_r的区别: echo和print都可以做 ...