React 中如何使用腾讯地图

1 引入腾讯地图 js API

其中 QQKEY 需要去应用管理创建

const QQKEY = '申请的Key';
export const TMapGL = (): Promise<any> => {
  if (window.TMap) return Promise.resolve();
  return new Promise(function (resolve, reject) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=' + QQKEY
    script.onerror = (err) => reject(err);
    script.onload = (e) => {
      resolve(e);
    }
    document.head.appendChild(script);
  });
}

2 初始化地图

const mapRef = useRef();

const initMap = () => {
  TMapGL().then(() => {
    const centerLngLat = new window.TMap.LatLng(center[1], center[0]);
    const map = new window.TMap.Map('container', {
      draggable: false,  // 不允许拖拽地图
      center: centerLngLat, // 设置中心点经纬度
      zoom: 14,  // 设置默认地图比例
      mapZoomType: window.TMap.constants.MAP_ZOOM_TYPE.CENTER  // 地图缩放焦点控制
    });
    map.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.SCALE); // 隐藏比例尺控件
    map.removeControl(window.TMap.constants.DEFAULT_CONTROL_ID.ROTATION); // 隐藏旋转控件
    mapRef.current = map;
  });
};

useEffect(() => {
  initMap();
}, []);

<div
 id="container"
  style={{
    {/* 创建地图容器元素 */}
    width: '500px',
    height: '300px',
  }}
></div>

3. 根据关键字搜索地址

<Select
  showSearch
  placeholder='请输入地址'
  defaultActiveFirstOption={false}
  showArrow={false}
  filterOption={false}
  onSearch={handleSearchByKeyword}
  onChange={handleGetSuggestions}
  notFoundContent={null}
  options={suggestions}
/>

const [suggestions, setSuggestions] = useState([]);

const handleSearchByKeyword = _.throttle((keyword: string) => {
  // 使用者在搜索框中输入文字时触发
  if (keyword) {
    const suggest = new window.TMap.service.Suggestion({
      // 新建一个关键字输入提示类
      pageSize: 10, // 返回结果每页条目数
    });
    suggest
      .getSuggestions({ keyword: keyword, location: mapRef.current?.getCenter() })
      .then((result: any) => {
        const list = result?.data.map((item: any) => ({
          label: item.title,
          value: `${item.location.lng},${item.location.lat}`
        }));
        setSuggestions(list);
      })
      .catch((error: any) => {
        console.error(error);
      });
  }
}, 300);

// 将选中的地址放在地图中心
const handleGetSuggestions = (value: any) => {
  const lngLat = value.split(',');
  const centerLngLat = new window.TMap.LatLng(lngLat[1], lngLat[0]);
  modalMapRef.current?.setCenter(centerLngLat);
}

4. 根据经纬度获取具体位置信息

const getLocationInfo = async(value: any) => {
  const location = new window.TMap.LatLng(value.lat, value.lng)
  const geocoder = new window.TMap.service.Geocoder();
  return geocoder.getAddress({ location }) // 将给定的坐标位置转换为地址
  .then(({result: {address_component}}: any) => {
    return {
      city: address_component.city,
      province: address_component.province.replace('市', ''),
      district: address_component.district
    };
  })
}

5. 校验经纬度是否有效

/**
 * 校验经度是否有效
 * @param lng string 经度
 * @returns boolean
 */
const isValidateLng = (lng?: string | number): boolean => {
  if (!lng) {
    return false;
  }
  // -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
  const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/;
  return !!lngReg.test(lng.toString());
};

/**
 * 校验纬度是否有效
 * @param lat string 纬度
 * @returns boolean
 */
const isValidateLat = (lat?: string | number): boolean => {
  if (!lat) {
    return false;
  }
  // -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
  const latReg = /^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/;
  return !!latReg.test(lat.toString());
};

详细 API 可见官网