地图实现定位搜索+编辑折线、多边形、圆

    <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>编辑折线、多边形、圆

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

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=c8c550c7e31dfabfba5b78ecf75f9dee&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor">

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

    <script src="https://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8">

    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js">

    <style type="text/css" media="screen">

        .button-group {position:absolute;top:0px;right:20px;font-size:12px;padding:10px;}

#myPageTop {

position:absolute;

            top:5px;

            left:0px;

            width:50%;

            background:#fff none repeat scroll 0 0;

            border:1px solid #ccc;

            margin:10px auto;

            padding:6px;

            font-family:"Microsoft Yahei", "΢���ź�", "Pinghei";

            font-size:14px;

        }

.button-group .button {

height:28px;

            line-height:28px;

            background-color:#0D9BF2;

            color:#FFF;

            border:0;

            outline:none;

            padding-left:5px;

            padding-right:5px;

            border-radius:3px;

            margin-bottom:4px;

            cursor:pointer;

            bottom:0;

            position:absolute;

            right:200%;

        }

<div id="container">

<div class="button-group">

    <input type="button" class="button" value="地图编辑完成" onClick="closeEditPolygon();"/>

<div id="myPageTop">

                <label>请输入关键字：

                <input id="tipinput"/>

<div style="position:absolute;bottom:4%;right:45%;" id="clear"><input type="button" class="button" value="清除标记点" onClick="clearMarks();"/>

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

resizeEnable:true,

        searchOption: {

city:'银川市',

            citylimit:true

        },

        mapCenterJson:{'银川市':[106.258889,38.472273],'石嘴山市':[106.376173,39.01333],'吴忠市':[106.199409,37.986165],'固原市':[106.285241,36.004561],'中卫市':[105.189568,37.514951]},

        mapCenter:[106.258889,38.472273],

        zoom:16,

        mapStyle:"amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式

        markers: [],

    });

    var beginNum =0;

    var clickListener ;

    var beginPoints;

    var beginMarks ;

    var polygonEditor;

    var resPolygon = [];

    var resNum =0;

    init();

    //输入提示

    var autoOptions = {

input:"tipinput",

    };

    var auto =new AMap.Autocomplete(autoOptions);

    var placeSearch =new AMap.PlaceSearch({

map:map

    });  //构造地点查询类

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

    function select(e) {

placeSearch.setCity(e.poi.adcode);

        placeSearch.search(e.poi.name);  //关键字查询查询

    }

function init(){

beginPoints = [];

        beginMarks = [];

        beginNum =0;

        polygonEditor ='';

        clickListener = AMap.event.addListener(map, "click", mapOnClick);

    }

function mapOnClick(e) {

beginMarks.push(addMarker(e.lnglat));

        beginPoints.push(e.lnglat);

        beginNum++;

        if(beginNum ==3){

AMap.event.removeListener(clickListener);

            var polygon =createPolygon(beginPoints);

            polygonEditor =createEditor(polygon);

        }

};

    function createPolygon(arr){

var polygon =new AMap.Polygon({

map:map,

            path: arr,

            strokeColor:"#0000ff",

            strokeOpacity:1,

            strokeWeight:3,

            fillColor:"#f5deb3",

            fillOpacity:0.35

        });

        return polygon;

    }

function createEditor(polygon){

var polygonEditor =new AMap.PolyEditor(map, polygon);

        polygonEditor.open();

        AMap.event.addListener(polygonEditor,'end',polygonEnd);

        return polygonEditor;

    }

function closeEditPolygon(){

polygonEditor.close();

        window.location.assign('shebeibangding.html');

        //window.sj_fh();

    }

function sj_fh() {

window.history.back();

    }

function polygonEnd(res){

resPolygon.push(res.target);

        appendHideHtml(resNum,res.target.getPath());

        json2arr(res.target.getPath());

        resNum++;

        init();

    }

function appendHideHtml(index,arr){

var strify =JSON.stringify(arr);

        var html ='<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';

        $('body').append(html);

    }

function clearMarks(){

window.location.reload();

    }

function json2arr(json){

var arr = json;

        var res = [];

        for (var i =0; i < arr.length; i++) {

var line = [];

            var jsstr =qqMapTransBMap(arr[i].lng, arr[i].lat)

res.push(jsstr)

};

        // console.log(res)

        localStorage.setItem('res',res);

    }

// 实例化点标记

    function addMarker(lnglat) {

var marker =new AMap.Marker({

icon:"http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",

            position: lnglat

});

        marker.setMap(map);

        return marker;

    }

function qqMapTransBMap(lng, lat) {

let x_pi =3.14159265358979324 *3000.0 /180.0;

        let x = lng;

        let y = lat;

        let z =Math.sqrt(x * x + y * y) +0.00002 *Math.sin(y * x_pi);

        let theta =Math.atan2(y, x) +0.000003 *Math.cos(x * x_pi);

        let lngs = z *Math.cos(theta) +0.0065;

        let lats = z *Math.sin(theta) +0.006;

        return "lng:" + lngs +",lat:"+lats

}

</html>