天地图标注获取与修改并保存信息

最新推荐文章于 2025-04-17 16:32:52 发布

yu3288163

最新推荐文章于 2025-04-17 16:32:52 发布

阅读量2.3k

点赞数

文章标签： javascript 其他

原文链接：https://blog.youkuaiyun.com/weixin_46074818/article/details/109484575

版权

1.纯小白，通过博主小黑猪hhh提供的学习笔记，自己也学习做获取后台数据并修改信息。

获取后台数据，并点击标注后弹窗效果

点击修改效果

html代码：

<body onLoad="mapLoad()">
      <div id="tabMapBox">

      </div>
</body>

js代码：

var map,markerTool,zoom = 12,markInfoWin,marker,content;
function mapLoad() {
  const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的秘钥";
  const imageURLT = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
    "&tk=你的秘钥";
  //创建自定义图层对象
  const lay1 = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
  const lay2 = new T.TileLayer(imageURLT, {minZoom: 1, maxZoom: 18});
  var config = {layers: [lay1, lay2]};
  map = new T.Map('tabMapBox',config);
  map.centerAndZoom(new T.LngLat(108.077582, 26.381093), zoom);
  //禁用双击放大
  map.disableDoubleClickZoom()
  //标注工具对象的图标
  tagicon= new T.Icon({iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png"})
  //创建标注工具对象
  markerTool = new T.MarkTool(map, {icon:tagicon,follow: true});

  //获取后台数据
   $.ajax({
    url: "gettdt",//后台地址
    type: "GET",
    data: {},
    success: function (data) {
      //全部数据
      dataloc=data
      //建立覆盖物
      buildCovers(dataloc)//返回后台数据
      console.log(dataloc)
        }
    }) 
};
//全部覆盖物
function buildCovers(coverdata){
 
  for (let i in coverdata){
    //循环将每一个坐标点创建Marker类对象
    var marker = new T.Marker(new T.LngLat(coverdata[i]['lng'],coverdata[i]['lat']));  // 创建标注

    //先将关于该坐标点的信息存储到数据库中
  //  console.log(marker)
    var content = [coverdata[i]['markid'],coverdata[i]['lng'],coverdata[i]['lat'],coverdata[i]['myremark'],coverdata[i]['markname']];
//    console.log(content)
     
    // 将标注添加到地图中
    map.addOverLay(marker);
    //添加坐标点的监听事件，当鼠标触碰该点时打开信息窗口
   addMouseoverHandler(content,marker);
   //添加点击按钮
   addClickHandler(content,marker); 
  }
}
  //点击覆盖物位置
  function addClickHandler(content,marker){
       marker.addEventListener("click",function(e){
       openInfo(content,e)
      console.log(content)
           }
         );
      }
//鼠标在覆盖物上的监听事件
function addMouseoverHandler(content,marker){
    marker.addEventListener("mouseover",function(e){
      //openInfo(content,e)
      console.log(content)

    }
    );
}

//窗口信息
function openInfo(content,e){
//  console.log(JSON.stringify(content))
        var res=JSON.stringify(content);
        console.log(res)
         console.log(content)
        var point = e.lnglat;
        // 创建信息窗口对象
        var markerInfoWin = new T.InfoWindow()
        var sContent =
        `
        <div id="win_box" style="height: auto; ">
          <table style=" width:300px;border-collapse: separate;font-size:14px;border-spacing:0 6px;table-layout:fixed;">
            <caption style="font-weight:bold;font-size:15px;">标注名称：${content[4]}</caption>
            <tr><td style=" width: 30%;font-weight:bold;text-align:left;">标注id:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${content[0]}</td></tr>
            <tr><td style=" font-weight:bold;text-align:left;">经纬度:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${content[1]} , ${content[2]} </td></tr>
            
            <tr><td style=" font-weight:bold;text-align:left;">备注:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${content[3]}</td></tr>
            <tr><td></td>
            <td><input type="button"value="修改"  style="outline: none;border:none;float: right;height: 25px;width: 50px;background-color:#dddddd;color: #57606f" onclick="show(`+ JSON.stringify(content).replace(/"/g, '&quot;') +`)">


            </td>
            </tr>
           
          </table>
        </div>
        `;
      
        //设置信息窗口要显示的内容
            markerInfoWin.setContent(sContent);
            //setOffset设置信息浮窗显示时向右下角偏移量（像素）。-30则代表向上偏移
            markerInfoWin.setOffset(new T.Point(0,-30))
        //开启信息窗口
        map.openInfoWindow(markerInfoWin,point);
      }
//使用layer.js的弹窗功能，在弹窗中添加表单修改标注点的信息
function show(data){
   // var res=JSON.stringify(data);
   // console.log([data])
   // console.log(data[0])
      
layer.open({
    type: 1,
    title: '修改',
    area: ['350px', '280px'],
    shadeClose: true, //点击遮罩关闭
    content: `
      <form id="updataform">
        <table style="margin:0 10px;width:300px;border-collapse: separate;font-size:14px;border-spacing:0 15px;table-layout:fixed;">
          <tr>
            <td style=" width: 10%;font-weight:bold;text-align:left;"><label for="markname"style="color: #57606f">标题名称</label></td>
            <td style="text-align:left;width:60%;word-break:break-all;">
              <input id="markname" value="${data[4]}" type="text" name="markname"style="outline:none;height: 30px;width:98%;padding-left: 3px">
            </td>
          </tr>
          <tr>
            <td style="font-weight:bold;text-align:left;">
              <label for="myremark"style="color: #57606f">备注</label>
            </td>
            <td style="text-align:left;width:80%;word-break:break-all;">
              <textarea id="myremark" style="outline:none;vertical-align: top;padding:5px" name="myremark" cols="32" rows="5"></textarea>
            </td>
          </tr>
          <tr>
            <td><input type="hidden"name="markid"value="${data[0]}"></td>
            <td>
              <input type="button"value="保存" style="outline: none;border:none;float: right;height: 25px;width: 50px;background-color:#dddddd;color: #57606f"onclick="saveSubmit()">
            </td>
          </tr>
        </table>
        </form>`
    });
//文本域赋值
   document.getElementById("myremark").value=data[3]
}
//提交修改的数据给后端
function saveSubmit(){
      $.ajax({
        //几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "updata" ,//url
        data: $('#updataform').serialize(),

        success: function (result) {
      var resultdata = JSON.parse(result)
      if(resultdata === 1){
        //提示
        layer.msg('保存成功');
        //保存成功刷新
        setTimeout("location.reload()",1000);
      }
    },
    error : function() {
      layer.open({
        title: '提示',
        content: '保存数据异常！'
      });
    }
      })
  }

PHP代码：

//获取后台数据
public function gettdt(){
    $data=Db::name('cs_tdt')
   // ->limit(20)
    ->select();
   
     return json($data);
 
}
//更新数据
public function updata(){

      if ($this->request->isAjax()) {
            $post = $this->request->post();
            // dump($post);die();
            $res=Db::name('cs_tdt')->save($post);
           return $res;
        }
  
 
}

大部分源码来自小黑猪hhh博主原创，https://blog.youkuaiyun.com/weixin_46074818/article/details/109484575 ，我是一名爱好者，纯技术小白，只是做学习记录，若文章侵权或者有不对的地方，欢迎大家指正。