地图搜索功能

芋圆社区 > 编程 > 天地图 > 地图搜索功能

920

2023-08-24

Hey、小怪兽

• 地图搜索有2种搜索方式，其中一种是使用WEB服务API发送请求去搜索，在这个导航栏的WEB服务API里的地名搜索V2.0：
• 首先在index.html先写一个输入框和按钮：

<div class="mapControl">
  <div class="mapControlRow">
    <input id="searchPlaceInput" placeholder="查找" type="text" autofocus="false" />
    <button onclick="searchPlace()">搜索</button>
  </div>
</div>

• 在index.css写上样式，去掉一些input和button初始样式和其他的：

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-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;
}

• index.js里写搜索的方法searchPlace：
- 首先获取输入框输入的文本内容
- 设置请求的地址和参数（keyword查询的内容，level地图层级，mapBound地图范围"-180,-90,180,90"应该是全图，queryType查询类型普通查询，start开始页数0，count查询数量100，这个count好像只能输入100，虽然官方写着300）
- 将参数拼接，最后发起fetch请求

// 搜索地名
const searchPlace = () => {
  const keyWord = document.getElementById("searchPlaceInput").value;
  const url = "https://api.tianditu.gov.cn/v2/search";
  const params = {
    postStr: JSON.stringify({
      keyWord,
      level: 5,
      mapBound: "-180,-90,180,90",
      queryType: 1,
      start: 0,
      count: 100,
    }),
    type: "query",
    // 改成自己申请的天地图应用的key
    tk: "84762e0e00395c65cbe043be0d6451b3",
  };

  // 将参数拼接到 URL 上
  const query = Object.keys(params)
    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
    .join("&");
  const fullUrl = `${url}?${query}`;

  fetch(fullUrl)
    .then((response) => response.json())
    .then((data) => {
      console.log("web接口", data);
      // 处理返回的数据
    })
    .catch((error) => {
      console.error("请求出错:", error);
      // 处理错误
    });
};

• 点击输入北京大学：
• 输入参数和返回参数文档都有介绍：
• 用WEB服务API搜索的话，只能一次搜索100条，如果搜索结果很多的话，如图，北京大学返回的count是有4553条，也就是说要循环发起46次请求才能拿到所有的数据，这对于我们来说是很不友好的，所以我换了一种内置的搜索LocalSearch，在JavaScipt API 4.0类参考里：
• 在初始化地图的时候初始化搜索，内置的搜索LocalSearch没有返回的数量限制，直接可以pageCapacity改成99999，onSearchComplete后面写的就是回调函数：

// 搜索对象
let localsearch = null;

// 初始化地图
const initMap = () => {
  ...其他代码
  initSearch();
};

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

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

// 搜索地名
const searchPlace = () => {
  const keyWord = document.getElementById("searchPlaceInput").value;
  localsearch.search(keyWord);
};

• 搜索出来的点位在这个pois里，或者点result里的pois也行：
• 内置的搜索查询出来的count远大于网站API，更加详细，也不好说哪个更权威更官方，这些搜索出来的不一定是点位，如果输入北京的话，他会默认搜索行政区域：
• 在这个搜索出来的结果再做一层判断：

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

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

  // 如果是点位搜索
  if (resultType === 1) {
    const points = result.getPois();
    console.log("搜索到的点位信息", points);
    ...其他操作
  } else if (resultType === 3) {
    // 地方行政搜索
    const area = result.getArea();
    console.log("搜索到的区域信息", area);
  } else {
    console.log("不支持其他类型的搜索，搜索类型为", resultType);
  }
};

• 像一些地方的天地图搜索，就算搜索了地名，比如北京，浙江啥的还是会出来搜索数据，他们应该是有自己的数据信息库，所以他们搜索出来的内容会少一点

上一篇：切换地图类型

下一篇：海量点加载

地图搜索功能

回复