react引入react

编程入门行业动态更新时间:2024-10-12 08:19:32

react引入react

import React, { useState } from 'react'
import { Map, Marker } from 'react-amap'
import { Select } from 'antd'
import styles from './index.less'// 初始定位到北京市
const GaudMap = ({ value = { lng: 116.2, lat: 39.56 }, onChange, height = 200 }) => {const [pois, setPois] = useState([]) // 暂存搜索项列表// 搜索参数格式const searchConfig = {pageSize: 10,pageIndex: 1,citylimit: true, // 搜索时是否限制城市city: '北京' // 初始城市，如果citylimit: true,那就限定在改城市内搜索}return (<div className={styles.container}>{/* Map的父组件必须加油宽度和高度 */}<div style={{ height, width: '100%' }}><Mapamapkey="高德地图给开发者分配的开发者Key" // 高德地图给开发者分配的开发者Key，你可以在[高德开放平台]()申请你自己的 Keyzoom={11} // 地图区域的缩放级别，取值范围是3-18，默认值是15center={[value?.lng, value?.lat]} // 待标注点的坐标(用户当前位置),格式为（经纬，纬度）events={{// 点击进行地图获取到经纬度和地标名click: ({ lnglat: { lat, lng } }) => {// AMap.Geocoder：地标编码与逆向地理编码，用于地址描述与坐标之间的转换// 逆向地理编码：将地理坐标（经纬度）转换成地址描述信息，对应为AMap.Geocoder的getAddress方法window.AMap.plugin('AMap.Geocoder', () => {const geocoder = new window.AMap.Geocoder({city: '北京',citylimit: true})// 根据给定坐标进行解析geocoder.getAddress([lng, lat], (status, result) => {// 当编码执行成功时触发此事件if (status === 'complete' && result.info === 'OK') {// Form的自定义组件onChange回调，将value值回显回去onChange({lng: String(lng),lat: String(lat),name: result?.regeocode?.formattedAddress})}})})}}}><SelectshowSearch // 配置是否可搜索className={styles.layerStyle}placeholder="请选择地址"optionFilterProp="children" // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索value={value?.name} // 地址描述onSearch={(val, isFocus = false) => {// 根据输入值查找相关搜索项，通过高德api的搜索功能获取搜索值，暂存搜索值列表。if (isFocus && pois?.length) return// 地点搜索服务插件，提供某一特定地区的位置查询服务const place = new window.AMap.PlaceSearch(searchConfig)// search方法：根据关键字搜索，关键字支持中文|中文全拼、繁体、英文place.search(val, (status, result) => {const { info, poiList } = resultif (result.length || info !== 'OK') return// 将获取到的符合兴趣点的地址放到Select的options项里面if (poiList.pois && Array.isArray(poiList.pois)) setPois(poiList.pois)})}}onChange={id => {// 根据id找搜索列表中有没有对应项，查找成功则设置搜索值。const signAddrList = pois?.find(item => item.id === id)if (signAddrList) {onChange({lng: String(signAddrList?.location.lng),lat: String(signAddrList?.location.lat),name: signAddrList?.name})}}}>{pois?.map(i => (<Select.Option key={i.id} value={i.id}>{i.name}</Select.Option>))}</Select>{value && (// 创建一个地图图标(指向当前指向坐标)<Markerposition={value} // 坐标（经纬度）// 绑定事件，实现搜索定位的apievents={{// created必须要拥有,用来初始化搜索工具created: () => {let autolet placeSearch// 异步加载AMap.Autocomplete插件：输入提示，根据输入关键字提示匹配信息window.AMap.plugin('AMap.Autocomplete', () => {auto = new window.AMap.Autocomplete({input: 'tipinput',outPutDirAuto: true,...searchConfig})})// 异步加载AMap.PlaceSearch插件：地点搜索服务插件，提供某一特定地区的位置查询服务window.AMap.plugin('AMap.PlaceSearch', () => {placeSearch = new window.AMap.PlaceSearch({input: 'tipinput',...searchConfig})})window.AMap.event.addListener(auto, 'select', e => {placeSearch.search(e.poi.name)})}}}/>)}</Map></div></div>)
}
export default GaudMap