天地图完整代码

芋圆社区 > 编程 > 天地图 > 天地图完整代码

514

2023-08-24

Hey、小怪兽

• index.html完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Test</title>
    <!-- 引入index.js和index.css -->
    <link rel="stylesheet" href="./index.css" />
    <script src="./index.js"></script>
    <!-- tk=后面跟的自己申请的天地图应用的key -->
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=84762e0e00395c65cbe043be0d6451b3" type="text/javascript"></script>
  </head>
  <body>
    <div id="mapDiv"></div>
    <div class="mapControl">
      <div class="mapControlRow">
        <input id="searchPlaceInput" placeholder="查找" type="text" autofocus="false" />
        <button onclick="searchPlace()">搜索</button>
      </div>
    </div>
    <!-- 自定义消息弹窗 -->
    <div id="customMessage"></div>
    <!-- 自定义Loading-->
    <svg viewBox="0 0 50 50" class="customLoading" id="customLoading">
      <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
    </svg>
    <script>
      // 页面加载完毕后执行的方法
      window.onload = function () {
        initMap();
      };
    </script>
  </body>
</html>

• index.css完整代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#mapDiv {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

button {
  color: #ffffff;
  border: none;
  border-radius: 10px;
  background-color: #d3a3ff;
  padding: 8px 15px;
}

input {
  width: 70%;
  height: 33px;
  padding-left: 10px;
  /* border: none; */
  border: 1px solid #b5b5b5;
  border-radius: 10px;
  outline: none;
}

input:focus {
  outline: none;
}

.mapControl {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  z-index: 2023;
}

.mapControlRow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
}

.customMessage {
  opacity: 0;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: #000000e0;
  font-size: 14px;
  padding: 10px 20px;
  z-index: 9999;
  border-radius: 8px;
  background-color: #ffffff;
  transition: opacity 0.5s ease;
}

.messageSuccess {
  color: #5eb11e;
  border: 1px solid #b7eb8f;
  background-color: #f6ffed;
}

.messageInfo {
  color: #1966ae;
  border: 1px solid #91caff;
  background-color: #e6f4ff;
}

.messageWarning {
  color: #c9a223;
  border: 1px solid #ffe58f;
  background-color: #fffbe6;
}

.messageError {
  color: #d01a0a;
  border: 1px solid #ffccc7;
  background-color: #fff2f0;
}

.customLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 9999;
}

.path {
  stroke: #409eff; /*给画笔设置一个颜色*/
  stroke-width: 3; /*设置线条的宽度*/
  stroke-dasharray: 95, 126; /*设置实现长95，虚线长126*/
  stroke-dashoffset: 0; /*设置虚线的偏移位置*/
  animation: loading-dash 1.5s ease-in-out infinite;
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 126; /*实线部分1，虚线部分126*/
    stroke-dashoffset: 0; /*前面1/126显示实线，后面125显示空白*/
  }

  50% {
    stroke-dasharray: 95, 126; /*实线部分95，虚线部分126*/
    stroke-dashoffset: -31px; /*顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条*/
  }

  to {
    stroke-dasharray: 6, 120; /*实线部分6，虚线部分120*/
    stroke-dashoffset: -120px; /*最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分*/
  }
}

• index.js完整代码：

// 地图变量
let map = null;
// 中心点
let center = [116.40769, 39.89945];
// 缩放级别
let zoom = 12;
let maxZoom = 18;
let minZoom = 5;
// 地图类型控件
let mapTypeControl = null;
// 聚合点
let pointClusterLayer = null;
// 搜索的点位
let searchPointArr = [];
// 搜索对象
let localsearch = null;

// 初始化地图
const initMap = () => {
  map = new T.Map("mapDiv");
  map.setMinZoom(minZoom);
  map.setMaxZoom(maxZoom);
  map.centerAndZoom(new T.LngLat(center[0], center[1]), zoom);
  // 创建地图类型控件对象和添加控件
  mapTypeControl = new T.Control.MapType([
    {
      //地图控件上所要显示的图层名称
      title: "地图",
      //地图控件上所要显示的图层图标（默认图标大小80x80）
      icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png",
      //地图类型对象，即MapType。
      layer: TMAP_NORMAL_MAP,
    },
    {
      title: "卫星混合",
      icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
      layer: TMAP_HYBRID_MAP,
    },
  ]);
  map.addControl(mapTypeControl);

  // 初始化地图失去输入框焦点
  document.getElementById("searchPlaceInput").blur();
  // 点击，拖拽，缩放地图都要让输入框失去焦点
  map.addEventListener("click", (e) => {
    document.getElementById("searchPlaceInput").blur();
  });
  map.addEventListener("zoomend", (e) => {
    document.getElementById("searchPlaceInput").blur();
  });
  map.addEventListener("touchstart", (e) => {
    document.getElementById("searchPlaceInput").blur();
  });
  map.addEventListener("touchmove", (e) => {
    document.getElementById("searchPlaceInput").blur();
  });
  map.addEventListener("touchend", (e) => {
    document.getElementById("searchPlaceInput").blur();
  });

  initSearch();
  handleLoading(false);
};

// 初始化搜索
const initSearch = () => {
  const config = {
    // 每页显示的数量
    pageCapacity: 99999,
    // 接收数据的回调函数
    onSearchComplete: localSearchResult,
  };
  // 创建搜索对象
  localsearch = new T.LocalSearch(map, config);
};

// 搜索的回调函数
const localSearchResult = (result) => {
  console.log("搜索结果", result);

  // 获取搜索结果的类型
  const resultType = parseInt(result.getResultType());

  // 如果是点位搜索
  if (resultType === 1) {
    const points = result.getPois();
    console.log("搜索到的点位信息", points);
    // 搜索前需要清空之前的点位
    if (pointClusterLayer) {
      pointClusterLayer.clearMarkers();
      pointClusterLayer.removeMarkers(searchPointArr);
      pointClusterLayer = null;
    }
    searchPointArr = [];

    // 添加点位Marker
    if (points.length > 0) {
      points.map((point) => {
        const marker = new T.Marker(new T.LngLat(point.lonlat.split(" ")[0], point.lonlat.split(" ")[1]), {
          title: point.name,
        });

        // 添加鼠标点击事件
        marker.addEventListener("click", () => {
          createInfoWin(marker);
        });

        searchPointArr.push(marker);
      });
    }

    // 聚合点
    pointClusterLayer = new T.MarkerClusterer(map, { markers: searchPointArr });
    console.log("聚合点", pointClusterLayer);
    pointClusterLayer.addEventListener("clusterclick", clusterClick);
  } else if (resultType === 3) {
    // 地方行政搜索
    const area = result.getArea();
    console.log("搜索到的区域信息", area);
  } else {
    console.log("不支持其他类型的搜索，搜索类型为", resultType);
  }
};

// 点击聚合点的方法
const clusterClick = (e) => {
  // 获取地图层级
  const zoom = map.getZoom();
  if (zoom < maxZoom) {
    return;
  }
  console.log(e);
  console.log("点击的数据", e.layer.LO);
  // 这些点位可以用来放到一个弹出框里什么的
};

// 创建信息窗口
const createInfoWin = (marker) => {
  const markerInfoWin = new T.InfoWindow(marker.options.title);
  marker.openInfoWindow(markerInfoWin);
};

// 搜索地名
const searchPlace = () => {
  const keyWord = document.getElementById("searchPlaceInput").value;
  if (keyWord === "") {
    message.error("请输入地名");
    return;
  }
  localsearch.search(keyWord);
};

// 弹窗的方法
const showMessage = (text, className) => {
  const customMessageElement = document.getElementById("customMessage");
  customMessageElement.style.opacity = "1";
  customMessageElement.className = className;
  customMessageElement.innerHTML = `<p>${text}</p>`;
  setTimeout(() => {
    customMessageElement.style.opacity = "0";
  }, 5000);
};

const message = {
  success: (text) => {
    showMessage(text, "customMessage messageSuccess");
  },
  info: (text) => {
    showMessage(text, "customMessage messageInfo");
  },
  warning: (text) => {
    showMessage(text, "customMessage messageWarning");
  },
  error: (text) => {
    showMessage(text, "customMessage messageError");
  },
};

// Loading的显示隐藏
const handleLoading = (isShow) => {
  document.getElementById("customLoading").style.display = isShow ? "block" : "none";
};

// 调用安卓的方法
const callAndroidMethod = () => {
  if (window.h5MapFunc && typeof window.h5MapFunc.getUserInfo === "function") {
    const userInfo = window.h5MapFunc.getUserInfo();

    const name = userInfo.match(/"name":"(.*?)"/)[1];
    const age = userInfo.match(/"age":([\d]+)/)[1];
    const money = userInfo.match(/"money":([\d]+)/)[1];
    const info = userInfo.match(/"info":"(.*?)"/)[1];

    // 小白 12 2000 其他信息
    console.log(name, age, money, info);
  }
};

上一篇：与安卓端交互

下一篇：天地图panTo导致聚合点散落

天地图完整代码

回复