腾讯地图选择店铺位置和用户下单位置范围

{include file="public/admin_header" /}
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <form class="layui-form" action="" lay-filter="component-form-element" onsubmit="return false">
        <div class="layui-card" id="layerButton">
          <blockquote class="layui-elem-quote">
            <div class="layui-card-header">
            <span class="layui-breadcrumb">
              <span style="color:#999!important;padding-right:10px;">当前位置：</span>
              {foreach $pathurl as $k=> $v}
              {if $k}
              <a href="{$v.column_url}">{$v.column_name}</a>
              {else /}
              <a>{$v.column_name}</a>
              {/if}
              {/foreach}
            </span>
            </div>
          </blockquote>

          <div class="layui-card-body" pad15>

            <div class="layui-form" lay-filter="">
              <div class="layui-form-item">
                <label class="layui-form-label">范围名称：</label>
                <div class="layui-input-inline">
                  <input type="text" name="maplimitname"  placeholder="请输入范围名称" lay-verify="required" value="" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
              </div>

              <input type="" name="maplimitzone" id="maplimitzone"  value="" />
              <input type="" name="maplimitshopaddress" id="maplimitshopaddress"  value=""   />

              <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline" >
                  <p style="font-weight: bold;"> 说明：地图上顶部的小手是设置店铺位置，多边形是设置可下单范围</p>
                  <div class="layui-input-inline" id="container" style="width:800px;height:520px" ></div>
                  <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
                  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=GCJBZ-WLXKP-EW5D5-LOVY2-LZZF6-VYFRT&libraries=drawing"></script>
                  <!--<script charset="utf-8" src='/static/home/js/jquery-2.1.1.min.js'></script>-->
                  <script>
                      var map,marker,polygon,drawingManager,lngLat; // 地图，坐标点，多边形初始化加载，多边形绘制，多边形每个点的集成数组
                      var markersArray=[],overlaysArray=[]; //标注点集合,绘制多边形时的集合
                      /**
                       * 初始化地图
                       */
                      function init() {
                          map = new qq.maps.Map(document.getElementById('container'), {
                              center: new qq.maps.LatLng(39.915599,116.403119), // 暂时默认成都
                              zoom: 8
                          });
                          // 标注的生成与回显
                          //addMarker(new qq.maps.LatLng(30.925788712587014,103.8922119140625)) // 初始化回显标注
                          markerOnly();
                          // 多边形绘制及回显
                          //设置多边形路径以便回显
//                          var path3=[
//                              new qq.maps.LatLng(30.57447,101.92377),
//                              new qq.maps.LatLng(30.17447,102.92377),
//                              new qq.maps.LatLng(31.57447,103.92377),
//                              new qq.maps.LatLng(30.37447,104.92377),
//                              new qq.maps.LatLng(30.47447,105.92377)
//                          ];
//                          showpolygon(path3);
                          // 绘制
                          addpolygon();
                      }
                      /**
                       * 标注
                       */
// 添加监听事件 获取鼠标单击事件（仅留一个标注点）
                      function markerOnly() {
                          qq.maps.event.addListener(map, 'click', function(event) {
                              addMarker(event.latLng)
                              qq.maps.event.addListener(map, 'click', function(event) {
                                  deleteOverlays()   // 删除原有标注仅留下一个
                                  marker=new qq.maps.Marker({
                                      position:event.latLng,
                                      map:map
                                  });
                              });
                              var gps = event.latLng.getLat() + ',' + event.latLng.getLng() // 解析出来的点方便给后端
                              document.getElementById('maplimitshopaddress').value=gps;
                          });
                      }
                      //添加标记
                      function addMarker(location) {
                          deleteOverlays()
                          var marker = new qq.maps.Marker({
                              position: location,
                              map: map
                          });
                          markersArray.push(marker);
                      }
                      //删除标记
                      function deleteOverlays() {
                          if (markersArray) {
                              for (i in markersArray) {
                                  markersArray[i].setMap(null);
                              }
                              markersArray.length = 0;
                          }
                          if (marker !== undefined) {
                              marker.setMap(null);
                          }
                      }
                      /**
                       * 多边形绘制
                       */
// 绘制
                      function addpolygon() {
                          drawingManager = new qq.maps.drawing.DrawingManager({
                              drawingMode: qq.maps.drawing.OverlayType.MARKER,
                              drawingControl: true,
                              drawingControlOptions: {
                                  position: qq.maps.ControlPosition.TOP_CENTER,
                                  drawingModes: [
                                      qq.maps.drawing.OverlayType.POLYGON
                                  ]
                              },
                              markerOptions:{
                                  visible:false
                              },
                              circleOptions: {
                                  fillColor: new qq.maps.Color(255, 208, 70, 0.3),
                                  strokeColor: new qq.maps.Color(88, 88, 88, 1),
                                  strokeWeight: 3,
                                  clickable: false
                              }
                          });
                          drawingManager.setMap(map);
                          qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
                              clearOverlays(overlaysArray)
                              lngLat = []
                              overlaysArray.push(event.overlay)
                              for (const item of event.overlay.getPath().elems) {
                                  let lng = item.getLng()
                                  let lat = item.getLat()
                                  lngLat.push({
                                      latitude: lat,
                                      longitude: lng
                                  })
                              }
                              document.getElementById('maplimitzone').value=JSON.stringify(lngLat);
                              console.log(lngLat)
                          });
                      }
                      // 初始化回显
                      function showpolygon(path3) {
                          polygon = new qq.maps.Polygon({
                              map: map
                          });
                          polygon.setPath(path3);
                      }
                      // 删除初始化多边形
                      function delpolygon() {
                          const a = []
                          polygon.setPath(a);
                      }
                      // 删除绘制的多边形
                      function clearOverlays() {
                          if (overlaysArray) { // 这个if判断在vue中会报错，不知道是里面的for in 被重写还是咋的，原因还不知道，如果报错可以不要这个if判断，删除标注那个地方跟这个原理是一样的，报错的话也不要，把长度重置为0
                              for (i in overlaysArray) {
                                  overlaysArray[i].setMap(null)
                              }
                          }
                          overlaysArray = [] // 需要重置为空，否则之前的数据还在这个数组里面
                      }
                      /**
                       *需要进行搜索的话加入下面代码
                       */
                      // 搜索
                      function onSearch(val) { // 自定义的搜索方法名，由事实触发
                          var _this = this
                          var keyword = val
                          var region = ''
                          var searchService = new qq.maps.SearchService({
                              complete : function(results){
                                  if (results.detail.pois) {
                                      _this.pois = results.detail.pois
                                  } else {
                                      Message.warning('请输入正确地址，例如成都太古里')
                                      return false
                                  }
                              }
                          })
                          searchService.setLocation(region)
                          searchService.search(keyword);
                      }
                      window.onload = function(){
                          //调用初始化函数地图
                          init();
                      }
                  </script>
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit lay-filter="setmyinfo">确认</button>
                  <button type="button" class="layui-btn layui-btn-primary custom_button" data-type="backpage">返回</button>
                </div>
              </div>
            </div>

          </div>
        </div>

      </form>
    </div>
  </div>
</div>

{include file="public/admin_footer" /}
<script>
     layui.config({
        base: '__STATIC__/base/layui/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','admin','upload'],function(){
        var $ = layui.$ , form = layui.form, admin= layui.admin, upload= layui.upload;

        //触发事件
        var active = {
            backpage: function () {
                location.href='index.html';
            }
        }

        $('#layerButton .custom_button').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        var layedit;
        var member_content
        layui.use('layedit', function(){
            layedit = layui.layedit;
            layedit.set({
                uploadImage: {
                    url: '{:url('upload')}' //接口url
                    ,type: 'post' //默认post
                }
            });
            member_content = layedit.build('member_content'); //建立编辑器
            //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
        });

        //监听提交
        form.on('submit(setmyinfo)', function(data){
            var field = data.field;

            $.ajax({
                url: '{:url('add')}'
                ,type: 'post'
                ,data: field
                ,success: function(res){ //这里要说明一下：done 是只有 response 的 code 正常才会执行。而 succese 则是只要 http 为 200 就会执行
                    //清空本地记录的 token，并跳转到登入页
                    //alert(res.code);
                    if(res.code=='0')
                    {
                        layer.msg(res.msg,{time:2000},function(){
                            window.location.href='{:url('index')}'
                        });
                    }else{
                        layer.msg(res.msg,{time:2000});
                    }

                }
            });
        });
    });



</script>
</body>
</html>

编辑时需要注意：
从hidden输入框获取的值不能直接传递,需要先拆分

 function init() {
                          map = new qq.maps.Map(document.getElementById('container'), {
                              center: new qq.maps.LatLng(39.915599,116.403119), // 暂时默认背景
                              zoom: 8
                          });
                          // 标注的生成与回显
                          var maplimitshopaddress=$('#maplimitshopaddress').val();
                          var arr=maplimitshopaddress.split(',');
                          addMarker(new qq.maps.LatLng(arr[0],arr[1])) // 初始化回显标注
                          markerOnly();
                          // 多边形绘制及回显
                          //设置多边形路径以便回显
//                          var path3=[
//                              new qq.maps.LatLng(30.57447,101.92377),
//                              new qq.maps.LatLng(30.17447,102.92377),
//                              new qq.maps.LatLng(31.57447,103.92377),
//                              new qq.maps.LatLng(30.37447,104.92377),
//                              new qq.maps.LatLng(30.47447,105.92377)
//                          ];
//                          console.log(path3);
                          var path9=[];
                          var path=$('#maplimitzone').val();
                          var jsarr=JSON.parse(path);
                          for(var p in jsarr){
                             //alert(jsarr[p].latitude + "," + jsarr[p].longitude);
                              path9.push(new qq.maps.LatLng(jsarr[p].latitude,jsarr[p].longitude));
                          }
                          console.log(path9);
                          showpolygon(path9);
                          // 绘制
                          addpolygon();
                      }