腾讯地图实现搜索地点和点击地图显示定位地点

草木红

已于 2025-01-02 22:00:25 修改

阅读量1.2k

点赞数 14

分类专栏： # JavaScript 文章标签：腾讯地图 javascript jsonp

于 2025-01-02 17:58:29 首次发布

本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/144854554

版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

【1】前期准备

1. 可以在腾讯地图申请一个账号（用微信就可以）：https://lbs.qq.com/
1. 创建一个应用
1. 给自己的自己要用的应用分配额度

【2】部分说明

引用的js： https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place 用于进行地图的绘制和事件的绑定，需要带上 libraries=place place 文本输入提示库，用于快速帮助用户完成检索关键词输入，参考：https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsBasic
引用的js：https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js 用于获取设备的当前位置
chrome 浏览器可能会有定位权限的问题建议用 edge
如果有设置域名白名单，需要在指定的域名下才能使用，文档：https://lbs.qq.com/faq/serverFaq/webServiceKey

通过 new qq.maps.SearchService 进行搜索已经不能用了，但是还是留着做参考

官方demo 普通字符搜索：https://lbs.qq.com/javascript_v2/case-run.html#service-searchserviceoptions
官方demo 关键字搜索提示：https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/placeLibrary
如果想用下面的方法可以使用公用key: OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

 // 查询位置
function initSearchService(pageIndex, searchCallBack) {
   searchService = new qq.maps.SearchService({
     //设置搜索范围为北京
     // location: "郑州市",
     //设置搜索页码,初始值为1
     pageIndex: pageIndex,
     //设置每页的结果数为10
     pageCapacity: 10,
     //设置展现查询结构到infoDIV上
     // panel: '',
     //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
     autoExtend: true,
     //检索成功的回调函数
     complete: (results) => {
       console.log(results);

       // 通过回调函数将数据发送出来
       searchCallBack && searchCallBack(results.detail);
     },
     error: () => {
       Notify({ type: 'danger', message: '查询出错' });
     },
   });
 }

【3】用例

搜索的结果如果有很多条需要自己进行分页处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 500px; margin: 0 auto"></div>
    <div style="width: 500px; height: 500px; margin: 0 auto">
      <input name="keyword" id="keyword" />
      <button type="button" id="searchBtn">搜索</button>
      <div id="results" style="height: 200px; overflow-y: auto"></div>
    </div>

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=place"></script>
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

    <script>
      let mapKey = '自己申请的key';
      let curPosition = []; // 记录第一次打开地图时的位置信息
      let map = null; // 地图实例
      let markers = []; // 标记点
      let labels = []; // 标记点提示信息
      let latitude = ''; // 标记点的纬度
      let longitude = ''; // 标记点的经度

      /**
       * 第一个参数为key, 与拦截是的保持一致
       * 第二个是referer，key 的名称
       */
      let geolocation = new qq.maps.Geolocation(mapKey, '自己申请的key对应的名字');

      geolocation.getLocation(
        (position) => showPosition(position),
        () => showErr()
      );

      // 获取当前位置信息
      function showPosition(position) {
        console.log(position);

        latitude = position.lat;
        longitude = position.lng;
        if (position.province) {
          // 所在省
          curPosition.push(position.province);

          if (position.city) {
            // 所在市
            curPosition.push(position.city);

            if (position.addr) {
              // 具体位置
              curPosition.push(position.addr);
            }
          }
        }

        setPositionInMap();
      }

      // 获取位置失败调用该函数
      function showErr() {
        console.error('获取位置失败');
      }

      // 初始化地图
      function setPositionInMap() {
        // 格式化当前经纬度坐标
        let myLatlng = new qq.maps.LatLng(latitude, longitude);

        let myOptions = {
          // 地图缩放级别
          zoom: 17,
          // 地图中心点
          center: myLatlng,
          // 是否显示比例尺
          scaleControl: false,
          // 控制缩放控件的位置
          zoomControlOptions: {
            position: qq.maps.ControlPosition.TOP_LEFT,
            style: qq.maps.ZoomControlStyle.DEFAULT,
          },
        };

        //获取dom元素添加地图信息
        map = new qq.maps.Map(document.getElementById('map'), myOptions);

        // 在地图上添加当前位置的标记点
        setNewCoordinate(myLatlng, curPosition.join('-'));

        // 添加地图点击事件
        qq.maps.event.addListener(map, 'click', (event) => {
          if (event.latLng) {
            clearOverlays(markers);
            setNewCoordinate(event.latLng);
          }
        });
      }

      /**
       * 设置新的坐标
       * @param {*} latLng 标记点坐标
       * @param {*} content 标记点显示的信息
       */
      function setNewCoordinate(latLng, content) {
        map.setCenter(latLng);
        let marker = new qq.maps.Marker({
          map: map,
          position: latLng,
        });

        markers.push(marker);

        // 设置标记点上显示的信息
        if (content) {
          let label = new qq.maps.Label({
            position: latLng,
            map: map,
            content: content,
          });

          labels.push(label);
        }
      }

      //清除地图上的marker和label
      function clearOverlays(markers) {
        if (!markers || !markers.length) return;
        let marker;
        let label;

        while ((marker = markers.pop())) {
          marker.setMap(null);
        }

        while ((label = labels.pop())) {
          label.setMap(null);
        }
      }

      // 模拟一个JSONP请求，防止跨域
      function jsonp(url) {
        // 创建script标签
        let script = document.createElement('script');
        // 添加到页面中
        document.body.appendChild(script);
        // 设置script标签的src属性
        script.src = url;

        script.onload = () => {
          // 移除script标签
          script.remove();
        };

        // 监听script标签的错误事件
        script.onerror = () => {
          console.error('JSONP request failed');
          // 移除script标签
          script.remove();
        };
      }

      // 关键词输入提示
      function suggestion(keyword, pageIndex) {
        if (!keyword) return;

        clearOverlays(markers);

        // 腾讯地图的搜索地址
        const url = `https://apis.map.qq.com/ws/place/v1/suggestion`;
        // 请求参数
        const params = {
          keyword: keyword,
          key: mapKey,
          page_size: 10, // 每次查询10条数据
          // 如果是jsonp请求数据，则需要设置output为jsonp
          // 否则，则需要设置output为json
          output: 'jsonp',
          page_index: pageIndex, // 当前是第pageIndex页
          // 回调函数，用于处理JSONP返回的数据
          callback: 'showSearchResult',
        };

        let paramsArr = [];
        Object.keys(params).forEach((key) => {
          if (params[key]) {
            paramsArr.push(`${key}=${params[key]}`);
          }
        });

        let newUrl = `${url}?${paramsArr.join('&')}`;

        jsonp(newUrl);
      }

      function handleResponse(data) {
        console.log('JSONP Response:', data);
      }

      // 在这里处理JSONP返回的数据并显示查询结果
      function showSearchResult(results) {
        if (results.status !== 0) {
          console.log('查询报错：' + results.message);
          return;
        }
        let searchResult = results.data;
        let searchResultLen = searchResult.length;
        let searchResultStr = '';

        for (let i = 0; i < searchResultLen; i++) {
          let searchResultItem = searchResult[i];

          searchResultStr += `<p 
          data-lat="${searchResultItem.location.lat}" 
          data-lng="${searchResultItem.location.lng}" 
          style="border-bottom: 1px solid #eee;">
            <span>${searchResultItem.title}</span>
            <br>
            <span>${searchResultItem.address}</span>
            <button class="addressBtn">选择</button>
          </p>`;
        }

        if (searchResultStr) {
          document.getElementById('results').innerHTML = searchResultStr;
        }
      }

      // 点击显示结果在地图上标记出来
      document.getElementById('results').addEventListener('click', (e) => {
        if (!e.target.classList.contains('addressBtn')) return;
        console.log(e.target.classList);
        let target = e.target;
        let content = target.innerHTML;
        let lat = target.parentNode.dataset.lat;
        let lng = target.parentNode.dataset.lng;

        setNewCoordinate(new qq.maps.LatLng(lat, lng), lat + ',' + lng);
      });

      let pageIndex = 1;// 当前页数
      document.getElementById('searchBtn').addEventListener('click', () => {
        suggestion(document.getElementById('keyword').value, pageIndex);
      });
    </script>
  </body>
</html>