<!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. 通过样式class 判断多个checkbox redio 是否都选中

    var count = "${count}"; for(var i=1;i<=count;i++){ var flag = false; if($("input[c ...

  2. 打开office word excel弹出visual studio 2008

    打开office word 或者excel或者ppt等文档就会弹出visual studio 2008正在配置对话框. 按照我下面的步骤,解决方法非常简单. 如果你的电脑是win7操作系统,从第一步开 ...

  3. Windows下VTK6.0.0安装详解（CMake使用说明）

    操作系统:Windows7,用到工具:Visual studio.CMake. 1.准备工作 VTK下载: 下载最新VTK稳定版(6.0.0,截至2013年7月)http://www.vtk.org/ ...

  4. 新冲刺Sprint3（第六天）

    一.Sprint介绍 商家功能模块继续完善着,加快了工作的步伐. 二.Sprint周期 看板: 燃尽图:

  5. 初用eclipse和svn遇见的问题以及解决方法

    第一次用eclipse 首先用SVN输入URI出现报错 去百度查了一下 大致就两点问题 1.防火墙的问题 2.SVN服务没开 我两个问题都不存在就去请教大神得到解决方案 解决方案:把URI的机器名改成 ...

  6. ipython安装

    sudo pip install jupyter 然后用jupyter notebook来运行

  7. delegate和protocol

    协议和代理对于一个新手来说确实不讨好理解,也有很多的iOS开发的老手对此是懂非懂的.网上的很多博文只是讲了怎么使用,并没有说的很明白.下面我谈一下我的理解. 1.你要先搞明白,协议和代理为什么会出现, ...

  8. android 7.0变化

    一.加强版的低电耗模式 条件:1未插电源:2屏幕关闭:(N与6.0的区别就在于N在手机非静止时也可进入低电耗模式) 作用过程及方式:1充电状态:2屏幕关闭一定时间:进入一级低电限制:关闭网络,推迟CP ...

  9. 第五章 搭建S3C6410开发板测试环境

    开发板是开发和学习嵌入式技术的主要设备.在这章中介绍了S3C6410开发板,它是三星公司推出的一款低功耗.高性价比的RISC处理器.安装串口调试工具:minicom.它的安装步骤:第1步:检测当前系统 ...

  10. Codeforces Round #361 Jul.6th B题 ☺译

    最近迈克忙着考前复习,他希望通过出门浮躁来冷静一下.迈克所在的城市包含N个可以浮躁的地方,分别编号为1..N.通常迈克在家也很浮躁,所以说他家属于可以浮躁的地方并且编号为1.迈克从家出发,去一些可以浮 ...