天地图获取坐标功能

最新推荐文章于 2024-08-29 09:04:28 发布

*小雪

最新推荐文章于 2024-08-29 09:04:28 发布

阅读量1.7k

点赞数 7

分类专栏：天地图文章标签：开发语言前端

本文链接：https://blog.csdn.net/qq_34568657/article/details/134952156

版权

天地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上次发布一个高德地图获取坐标的功能，这次是天地图获取坐标功能
高德地图上一篇

天地图

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>天地图拾取坐标</title>
    <script
      type="text/javascript"
      src="http://api.tianditu.gov.cn/api?v=4.0&tk=自己的key"
    ></script>
    <script src="js/lindai.js"></script>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "Microsoft YaHei";
      }
      #mapDiv {
        width: 100%;
        height: 100%;
      }
      input,
      b,
      p {
        margin-left: 5px;
        font-size: 14px;
      }
      .post {
        position: absolute;
        z-index: 1000;
        top: 0;
        background-color: #fff;
        width: 500px;
        height: 100px;
      }
    </style>
    <script>
      var map;
      var zoom = 14;
      var lay;
      var onlyMapLay;
      function onLoad() {
        //初始化地图对象
        map = new T.Map("mapDiv");
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(121.09, 30.68), zoom);
        //允许鼠标滚轮缩放地图
        map.enableScrollWheelZoom();
        var point = [];
        lindai.forEach((element) => {
          point.push({
            lng: element[0],
            lat: element[1],
          });
        });
        let line = new T.Polyline(point, {
          color: "red",
          weight: 4,
          opacity: 1,
          lineStyle: "solid",
        });
        map.addOverLay(line);

        //创建对象
        var ctrl = new T.Control.MapType();
        //添加控件
        map.addControl(ctrl);
        var dianshuz = [];
        var MapMousemove = function (e) {
          console.log(e.lnglat, "11");

          var icon = new T.Icon({
            iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
            iconSize: new T.Point(19, 27),
            iconAnchor: new T.Point(10, 25),
          });
          //向地图上添加自定义标注
          var marker = new T.Marker(new T.LngLat(e.lnglat.lng, e.lnglat.lat), {
            icon: icon,
          });
          map.addOverLay(marker);
          var mashArr = [];
          mashArr.push(e.lnglat.lng + "," + e.lnglat.lat);
          dianshuz.push(mashArr);
          document.getElementById("lnglat").value = dianshuz.join("],[");
        };
        map.addEventListener("click", MapMousemove);
      }
    </script>
  </head>
  <body onLoad="onLoad()">
    <div id="mapDiv"></div>
    <div class="post">
      <textarea name="" id="lnglat" cols="100%" rows="10"></textarea>
    </div>
  </body>
</html>