<!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. php策略模式

    一.编写一个简单的网页计算器功能 代码片段: 视图页面(两个输入框,一个下拉列表选择操作符,一个计算按钮) 后台php程序处理(最原始的写法) 假如新加一个运算方式(取余),那么就得修改php后台程序 ...

  2. 如何使用Python3.4连接MySQL

    http://www.tuicool.com/articles/yqayEv import pymysql conn = pymysql.connect(host='localhost', port= ...

  3. OGRE启动过程详解（OGRE HelloWorld程序原理解析）

    本文介绍 OGRE 3D 1.9 程序的启动过程,即从程序启动到3D图形呈现,背后有哪些OGRE相关的代码被执行.会涉及的OGRE类包括: Root RenderSystem RenderWindow ...

  4. iOS不使用JSONKit做Dic到JsonString的转换

    NSDictionary to jsonString [self DataTOjsonString:dic] -(NSString*)DicToJsonString:(id)object { NSSt ...

  5. Oracle笔记3-高级查询

    高级查询 1.关联查询 作用:可以跨多表查询 --查询出员工的名字和他所在部门的名字 //错误//select first_name,name from s_emp,s_dept; //错误原因:产生 ...

  6. ViewStub的简单用法和说明

    最近无意间知道了ViewStub,所以特地的去了解了一下 都知道ViewStub是一个不可见的,大小为0的View,实际上跟include差不多,但是ViewStub要更加节约资源.被称为是" ...

  7. 0823--静默安装、fiddler设置断点、f12清除数据记录

    刚写了半天,然后没保存,哎,墙角抹泪. Anyway,记一下最近工作中遇到的问题吧. 1. 静默安装 cmd命令:拖入exe 文件,空格后输入--silent-install 若要在安装时修改主页,则 ...

  8. POJ 3009 DFS+剪枝

    POJ3009 DFS+剪枝 原题: Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16280 Acce ...

  9. 每天一个命令ls 2015/4/1

    ls命令可以说是Linux下最常用的命令 -a 列出目录下的所有文件,包括以 . 开头的隐含文件.-b 把文件名中不可输出的字符用反斜杠加字符编号(就象在C语言里一样)的形式列出.-c 输出文件的 i ...

  10. HTML5 3D爱心动画 晚来的七夕礼物

    在线演示源码下载 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’& ...