地图划范围

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=a2090e4b4d224bc6d7956112cdd1b763"></script>

<script src="/Content/js/jquery-1.9.1.js"></script>

<script>

    window.onload = function () {

        layui.use(['element', 'layer'], function () {
            var element = layui.element,
           layer = layui.layer, $ = layui.$;

            var center_lat = "29.464336";
            var center_lng = "106.477239";
            ///中心位置坐标生成
            var localcenter = new AMap.LngLat(center_lng, center_lat);

            var gmap;

            //编辑中的多边形坐标数组,门店标签,门店标识,门店范围
            var edit_polyons = [], groupmarkers = [], grouplabels = [], grouppolyons = [], temp_remark = [], markerlabel;

            ///展示的门店列表，如果列表为空则展示全部门店
            var showlist = [];

            //初始化地图函数  自定义函数名init
            function init() {
                $(".btn_update").hide();

                edit_polyons = []; groupmarkers = []; grouplabels = []; grouppolyons = []; temp_remark = []; markerlabel = null;

                gmap = new AMap.Map('mapcontainer', {
                    zoom: 14,//级别
                    center: localcenter,//中心点坐标
                    viewMode: '2D'//使用3D视图
                });


                $.ajax({
                    type: 'GET',
                    url: "storepointlist",
                    data: "",
                    dataType: 'json',
                    cache: false,
                    error: function () {
                        alert('出错了！');
                        return false;
                    },
                    success: function (storejson) {
                        storelist = storejson;
                        for (var i = 0, l = storejson.length; i < l; i++) {
                            var storeinfo = storejson[i];
                            var hasee = showlist.indexOf(parseInt(storeinfo.orgid));
                            if (hasee != -1 || showlist.length == 0) {
                                load_store_edit(gmap, storeinfo);
                            }
                        }
                    }
                });
            }
            ///初始加载门店列表
            function load_store_edit(gmap, storeinfo) {
                var lng = storeinfo["longitude"];
                var lat = storeinfo["latitude"];

                //标注其他位置
                var storecenter = new AMap.LngLat(lng, lat);
                var storename = storeinfo["branch_name"];
                var storepolygons = storeinfo["mappolygons"];
                var storeid = storeinfo["orgid"];

                ///添加初始化的范围
                //标注门店中心位置
                var marker = new AMap.Marker({
                    position: storecenter,
                    map: gmap,
                    title: storename
                });
                groupmarkers.push(marker);

                ///绑定marker的双击事件
                var listener = marker.on('dblclick', function () {
                    //移除 dblclick 事件.
                    marker.off('dblclick');
                    for (var i = 0; i < groupmarkers.length; i++) {
                        groupmarkers[i].setMap(null);
                    }
                    for (var i = 0; i < grouplabels.length; i++) {
                        grouplabels[i].setMap(null);
                    }
                    for (var i = 0; i < grouppolyons.length; i++) {
                        grouppolyons[i].setMap(null);
                    }
                    groupmarkers = [];
                    grouplabels = [];
                    grouppolyons = [];

                    dbclick_fun(gmap, storeinfo, marker, storelist);

                });

                //标注门店名
                var label = new AMap.Text({
                    text: storename,
                    map: gmap,
                    offset: new AMap.Pixel(0, 20),
                    position: storecenter
                });
                grouplabels.push(label);
                //画门店范围
                if (storepolygons != "") {
                    //添加已划范围
                    var newarray = JSON.parse(storepolygons);
                    var lnglats = [];
                    for (var k = 0; k < newarray.length; k++) {
                        lnglats.push(new AMap.LngLat(newarray[k][0], newarray[k][1]));
                    }
                    //该范围不添加标注
                    var polygon = new AMap.Polygon({
                        map: gmap,
                        path: lnglats,
                        strokeColor: '#ee2200',
                        strokeWeight: 3,
                        fillOpacity: 0.1, //填充透明度,
                        bubble: true
                    });
                    grouppolyons.push(polygon);
                }
            }

            ///重新加载不可编辑的门店信息
            function load_store_notedit(gmap, storelist) {

                for (var i = 0, l = storelist.length; i < l; i++) {

                    var storeinfo = storelist[i];
                    var hasee = showlist.indexOf(parseInt(storeinfo.orgid));
                    if (hasee != -1 || showlist.length == 0) {

                        var lng = storeinfo["longitude"];
                        var lat = storeinfo["latitude"];

                        //标注其他位置
                        var storecenter = new AMap.LngLat(lng, lat);
                        var storename = storeinfo["branch_name"];
                        var storepolygons = storeinfo["mappolygons"];

                        ///添加初始化的范围
                        //标注门店中心位置
                        var marker = new AMap.Marker({
                            position: storecenter,
                            map: gmap,
                            title: storename
                        });
                        groupmarkers.push(marker);

                        //标注门店名
                        var label = new AMap.Text({
                            text: storename,
                            map: gmap,
                            offset: new AMap.Pixel(0, 20),
                            position: storecenter
                        });

                        grouplabels.push(label);
                        //画门店范围
                        if (storepolygons != "") {
                            //添加已划范围
                            var newarray = JSON.parse(storepolygons);
                            var lnglats = [];
                            for (var k = 0; k < newarray.length; k++) {
                                lnglats.push(new AMap.LngLat(newarray[k][0], newarray[k][1]));
                            }
                            //该范围不添加标注
                            var polygon = new AMap.Polygon({
                                map: gmap,
                                path: lnglats,
                                strokeColor: '#b1a19d',
                                strokeWeight: 3,
                                fillOpacity: 0.1, //填充透明度,
                                bubble: true
                            });
                            grouppolyons.push(polygon);
                        }

                    }
                }
            }

            //双击指定点后,移除所有marker重新添加双击的marker
            function dbclick_fun(gmap, storeinfo, marker, storelist) {
                edit_polyons = [];
                var storeid = storeinfo["orgid"];
                var storename = storeinfo["branch_name"];
                var readypoly = storeinfo["mappolygons"];
                //标注其他位置
                var storecenter = marker.getPosition();
                localcenter = storecenter;

                ///当前编辑门店增加圆范围

                var editcircle = new AMap.Circle({
                    center: storecenter,
                    radius: 2000, //半径
                    borderWeight: 3,
                    strokeColor: "#FF33FF",
                    strokeOpacity: 1,
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: 'dashed',
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: '#1791fc',
                    zIndex: -99,
                    bubble: true
                })

                editcircle.setMap(gmap);

                // 缩放地图到合适的视野级别
                gmap.setFitView([editcircle]);

                gmap.plugin(["AMap.CircleEditor"], function () {
                    var circleEditor = new AMap.CircleEditor(gmap, editcircle);
                    circleEditor.open();
                });

                if (readypoly != "") {
                    //添加已划范围
                    var newarray = JSON.parse(readypoly);
                    edit_polyons = [];
                    for (var k = 0; k < newarray.length; k++) {
                        edit_polyons.push(new AMap.LngLat(newarray[k][0], newarray[k][1]));
                    }
                    add_polyons_edit(gmap, storecenter);
                }
                else {
                    ///开启地图点击事件
                    var mapclick = gmap.on("click", function (event) {
                        if (temp_remark.length < 3) {
                            addremark(gmap, event.lnglat, storeinfo, storecenter);
                        }
                        else {
                            gmap.off("click", mapclick);
                        }
                    });
                }

                load_store_notedit(gmap, storelist);

                $(".btn_update").css('display', "block");

                //防止重复绑定click事件,先解绑
                $(".savepolygons").unbind();

                $(".savepolygons").click(function () {
                    if (edit_polyons.length > 2) {

                        layer.msg("正在保存，请稍后。");
                        var savearraylist = [edit_polyons.length];//二维数组保存
                        for (var i = 0; i < edit_polyons.length; i++) {
                            var patharray = [edit_polyons[i].lng, edit_polyons[i].lat];
                            savearraylist[i] = patharray;
                        }
                        var saveparam = JSON.stringify(savearraylist);
                        $.ajax({
                            type: 'GET',
                            url: "savemappolygons",
                            data: "orgid=" + storeid + "&mappoly=" + saveparam,
                            dataType: 'text',
                            cache: false,
                            error: function () {
                                layer.msg("保存失败，请重新登录。");
                            },
                            success: function (saveresult) {
                                if (saveresult == "ok") {
                                    layer.msg("保存成功。");
                                    //保存成功后,销毁地图,并重新加载地图
                                    gmap && gmap.destroy();
                                    init();
                                }
                                else {
                                    layer.msg("保存失败。");
                                }
                            }
                        });
                    }
                    else {
                        layer.msg("必须要三个以上范围才可以保存");
                    }
                    return false;
                });

                //退出编辑,清除范围,移除点击事件
                $(".exitpolygons").click(function () {

                    //退出编辑提醒
                    layer.open({
                        type: 1
                        , area: '300px;'
                        , shade: 0.5
                        , title: "提醒"
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['确定退出', '继续编辑']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: '<div style="padding: 20px; line-height: 22px; color: #000; font-weight: 300;">退出编辑后，当前设定范围不会保存，确定退出？</div>'
                        , yes: function (layero) {

                            //保存成功后,销毁地图,并重新加载地图
                            gmap && gmap.destroy();
                            init();
                            layer.closeAll();
                        }
                    });

                    return false;
                });
            }
            ///地图,目的地,起始位置
            function getthisdistance(gmap, comepath, frompath) {
                //计算该距离离坐标中心的骑行距离
                $.ajax({
                    type: 'GET',
                    url: "getdistance",
                    data: "mode=driving&frompath=" + frompath.lng + "," + frompath.lat + "&topath=" + comepath.lng + "," + comepath.lat + "&pathkey=4OSBZ-ZZCKW-AUZRA-O6OXD-MTWZQ-RZBF5",
                    dataType: 'json',
                    cache: false,
                    error: function () {
                        return false;
                    },
                    success: function (resultjson) {
                        if (resultjson != null && resultjson.status == 0) {
                            var distance = resultjson.result;
                            if (markerlabel == null || markerlabel == 'undefined') {
                                markerlabel = new AMap.Text({
                                    position: comepath,
                                    offset: new AMap.Pixel(0, 20),
                                    map: gmap,
                                    text: '驾车距离' + distance + "米",
                                    bubble: true
                                });
                            }
                            else {
                                markerlabel.setPosition(comepath);
                                markerlabel.setText("驾车距离" + distance + "米");
                            }
                        }
                        else {

                        }
                    }
                });
            }


            //点击地图后添加一个点,可拖动
            function addremark(gmap, lnglat_position, storeinfo, storecenter) {
                //对地图进行标注
                //获取坐标信息,并标注

                if (temp_remark.length < 3) {

                    var polmarker = new AMap.Marker({
                        position: lnglat_position,
                        map: gmap
                    });
                    getthisdistance(gmap, lnglat_position, storecenter);
                    //记录坐标信息
                    edit_polyons.push(lnglat_position);
                    temp_remark.push(polmarker);
                }

                if (temp_remark.length > 2) {
                    //达到范围条件,清空坐标点,添加编辑范围
                    for (var kk = 0; kk < temp_remark.length; kk++) {
                        temp_remark[kk].setMap(null);
                    }
                    add_polyons_edit(gmap, storecenter);
                }
            }

            function add_polyons_edit(gmap, storecenter) {
                if (edit_polyons.length > 2) {
                    var mypolygon = new AMap.Polygon({
                        path: edit_polyons,     //设置折线的节点数组
                        strokeColor: "#F00",
                        strokeOpacity: 0.4,
                        strokeWeight: 3,
                        strokeStyle: "dashed",
                        strokeDasharray: [10, 5]
                    });

                    mypolygon.setMap(gmap);

                    // 缩放地图到合适的视野级别
                    gmap.setFitView([mypolygon]);

                    gmap.plugin(["AMap.PolyEditor"], function () {
                        var polygonEditor = new AMap.PolyEditor(gmap, mypolygon);
                        polygonEditor.open();

                        polygonEditor.on('adjust', function (event) {
                            var eventposition = event.lnglat;

                            getthisdistance(gmap, eventposition, storecenter);
                            ///记录坐标
                            var edit_polyons = mypolygon.getPath();
                        })
                    });

                }
            }
            //调用初始化函数地图
            init();
        });
    }

</script>