React 插入百度地图获取定位信息

最新推荐文章于 2024-09-14 07:50:58 发布

原创

最新推荐文章于 2024-09-14 07:50:58 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #定位 #typescript #react

本文介绍了如何在React应用中使用@uiw/react-baidu-map组件库，展示了如何集成Ant Design UI框架，并通过地址输入实现地理位置查找和设置。包括Modal对话框、Autocomplete搜索和地图定位功能的详细代码示例。

1.安装React 百度地图组件库

npm install @uiw/react-baidu-map --save

2.基于Ant Design UI框架【组件代码】

import React, { useState, useEffect } from 'react';
import {
  Modal, Button, AutoComplete, Input, Tag, Col, Row,
} from 'antd';
import {
  Map, APILoader, useMap, MapTypeControl,
} from '@uiw/react-baidu-map';
import { SelectProps } from 'antd/es/select';
import style from '../Bmap.less';

interface it{
    address: string,
    addrPoint: {
        lng: number,
        lat: number
    }
}
interface point{
  lng: number,
  lat: number
}
interface inforow{
  setPoint:any,
  setVisiable:any,
}
const Bmap:React.FC<inforow> = (prop:inforow) => {
  const { setPoint, setVisiable } = prop;
  const [isModalVisible, setIsModalVisible] = useState(true);
  const [ob, setObj] = useState<point>();
  const [form, setForm] = useState<it>();
  const [pointName, se