[JavaScript知识库] react 百度地图添加定位

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react 百度地图添加定位 -> 正文阅读

[JavaScript知识库]react 百度地图添加定位

做了个百度地图定位，真是一步一个坎儿，遇到的问题和解决过程记录在这里，每一个坑我都亲自踩过，解决办法也亲测有效

 var myGeo = new BMapGL.Geocoder();      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMapGL.Point(result.center.lng, result.center.lat), function(res){      
    if (res){
        alert(res.address)    
    } else {
        console.log('--根据坐标得到地址描述失败--')
	}
})

传入刚才得到的经纬度，就可以啦~
在这里插入图片描述

添加定位控件

百度地图给提供了现成的控件，不过点击方法我是自己加的，可以随心所欲~
还是那个链接~
开发指南 -> 【添加控件】
在这里插入图片描述
应用起来：

// 添加定位控件
    let dom = document.getElementsByClassName("BMap_noprint")[0] // 检查现在是否有地图控件
    if (openLocation && !dom) { // 开启定位且未添加过定位控件，添加
      let geolocationControl = new BMapGL.LocationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  // 放右下角
        showAddressBar: false, //是否显示定位信息面板
        enableAutoLocation : false,  //首次是否进行自动定位
        offset: new BMapGL.Size(6,6)//偏移距离
      })
      this.map?.addControl(geolocationControl) //将控件添加到地图
      setTimeout(() => {
        let dom = document.getElementsByClassName("BMap_noprint")[0]
        dom?.addEventListener('click', () => this.locationFunc()) // 获取定位
      }, 500);
    }

添加效果：
在这里插入图片描述

这里就有好多我曾经踩过的坑：

因为我用的是 react-bmapgl，this.map 不能直接获取到，需要转一下
文档链接 https://lbsyun.baidu.com/solutions/reactBmapDoc

ref={ref => {this.map = ref?.map}}

我的地图刷新比较多，会有重复添加控件的情况，所以我在前面加了个判断~
偏移距离不加的话，没有刚刚好在右下角，这个可以视情况而定
后面延时里面的就是自定义的点击方法啦~，点击方法里直接调用定位方法就能重新定位了

定位点周边信息获得及展示

实现效果：
在这里插入图片描述
上方法代码：

this.showSearchList(['餐饮','商场','学校','医院', '酒店', '加油站', '公交站','地铁站'])

里面的参数根据需要传，只写一个不用方括号也是可以的。

// 获得定位位置 300 米范围内的位置信息
  showSearchList = async (keyWord) => {
    let { locationPosition } = this.state
    let myPoint = new BMapGL.Point(locationPosition.lng, locationPosition.lat);
    let range = 300
    console.log('myPoint--', myPoint);
    let local = new BMapGL.LocalSearch(this.map, {
      renderOptions: {
        // map: map,//把默认的图标隐藏
        selectFirstResult:false,//是否选择第一个检索结果
        autoViewport: false//检索结束后是否自动调整地图视野（切换类型后，定位点不变用false）
      },
      pageCapacity:10,//检索个数10个（就是返回的多少条结果）
      onSearchComplete: (results) => {
        console.log('local--', local, local.getStatus());
        console.log('results:',results)
        switch(local.getStatus()) {  
          case 2: alert( '位置结果未知 获取位置失败' ); break;  
          case 3: alert( '导航结果未知 获取位置失败' ); break;  
          case 4: alert( '非法密钥 获取位置失败' ); break;  
          case 5: alert( '对不起 非法请求位置  获取位置失败' ); break;  
          case 6: alert( '对不起 当前没有权限 获取位置失败' ); break;  
          case 7: alert( '对不起 服务不可用 获取位置失败' ); break;  
          case 8: alert( '对不起 请求超时 获取位置失败' ); break;  
        }           
        if (local.getStatus() == BMAP_STATUS_SUCCESS){ // 检索成功
          let nearbyDatas = []
          results.map(item => {
            if(item._pois && item._pois.length > 0) {
              item._pois.map(pois => {
                if (pois.point) {
                  nearbyDatas.push({
                    address: pois.address,
                    point: pois.point,
                    title: pois.title
                  })
                }
              })
            }
          })
          // console.log('nearbyDatas--', nearbyDatas);
          this.setState({
            nearbyDatas
          })
        }
      }
    });
    local.searchNearby(keyWord, myPoint, range); 
  }

代码里的 locationPosition 就是我前面获得的定位信息。
range 是查询范围，根据需要改，我查了 300 米。
最后获得的位置信息筛选出有经纬度的，存到 nearbyDatas。

local.getStatus() 状态码我遇到过 5 和 2，local.getStatus() = 5 是因为 onSearchComplete 方法没用箭头函数；local.getStatus() = 2 是因为 myPoint 还没取到值就调用搜索方法了，或者地图中心点不在定位位置；
在这里插入图片描述
应用：

import { List } from 'antd';
import styles from './index.module.less';

<div className={styles.addressNearbyStyle}>
      <div className={styles.addressNearbyHeaderStyle}>可选300米范围之内的地点</div>
      <List
          itemLayout="horizontal"
          size="small"
          dataSource={nearbyDatas}
          renderItem={item => (
          	<List.Item onClick={() => this.neardyDataClickFunc(item)}>
            	<List.Item.Meta
                      title={<a style={{color: '#fff'}}>{item.title}</a>}
                      description={item.address}
                 />
            </List.Item>
          )}
      />
</div>

样式文件 index.module.less

.addressNearbyStyle {
  z-index: 1002;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: rgba(0,0,0,0.9);

  .addressNearbyHeaderStyle {
    color: #c2c2c2;
    padding: 8px 16px;
    border-bottom: 1px solid #716e6e;
  }

  :global {
    .ant-list {
      height: calc(100% - 39px);
      overflow: auto;  // 滚动
    }
    .ant-list::-webkit-scrollbar { // 滚动条隐藏
      display: none; 
    }
    .ant-list-split .ant-list-item {
      border-bottom: 1px solid #716e6e;
    }
    .ant-list-item-meta-description {
      color: #c2c2c2;
      font-size: 12px;
    }
  }
}