高德地图key - 技术栈

第一步：加载地图组件 AMapLoader.load

第二步：初始化地图组件，在地图上做标记

第三步：打开地图弹窗，new AMap.InfoWindow

第四步：搜索弹窗上的select，调用接口，返回数据展示在select上（后端模糊搜索 + 防抖）

第五步：选择心仪地址，进行回调

javascript 复制代码

import AMapLoader from '@amap/amap-jsapi-loader'
import React, { useEffect, useRef, useState } from 'react'
import debounce from 'lodash/debounce'

const MapSelect = (props) => {
  const { value } = props
  const geocoder = useRef<any>()
  const map = useRef<any>()
  const [AMap, setAMap] = useState(null)
  const mapRef = useRef<any>()

  useEffect(() => {
    AMapLoader.load({
      //首次调用 load
      key: 'xxx', //首次load key为必填
      version: '2.0',
      plugins: ['AMap.Geocoder'],
    }).then((_AMap) => {
      // 组件初始化之后将获取到的AMap对象
      setAMap(_AMap)
      const AMap = _AMap
      geocoder.current = new AMap.Geocoder({})
      initMap()
    })
  }, [])

  //初始化地图
  const initMap = () => {
    const { longitude, latitude, text } = value || {}
    const center =
      longitude && latitude ? new AMap.LngLat(longitude, latitude) : null

    map.current = new AMap.Map(mapRef.current, {
      resizeEnable: true,
      jogEnable: false,
      zoom: 14,
      center,
    })
    center && updateMark(center, text) // 地图上做标记
  }

  // 更新marker
  const updateMark = (center, text) => {}

  const debounceSearchApi = debounce((value: string) => {
    searchByApi(value)
  }, 300)

  // 使用api查询搜索出来的地址
  const searchByApi = async (value: string) => {}

  // 打开地图弹窗，展示地图组件
  const setInfoWindowContent = (e) => {
    infoWindow = new AMap.InfoWindow({
      isCustom: true,
      content,
      offset: new AMap.Pixel(0, -40),
    })

    infoWindow?.open(map.current, location)
    map?.current?.setCenter(center)
    map?.current?.setZoom(14)
  }

  return (
    <>
      <Search
        onSearch={openSelectLngLat}
        placeholder="请输入地址"
        value={text}
        onChange={handleInputChange}
        onCompositionStart={handleCompositionStart}
        onCompositionEnd={handleCompositionEnd}
        style={{ width, ...style }}
      />
      <div
        onMouseUp={onMouseUp}
        onMouseMove={onMouseMove}
        onMouseDown={onMouseDown}
        onClick={() => {
          if (!isMove) {
            openSelectLngLat()
          }
        }}
      >
        <div ref={mapRef} />
        {!(longitude && latitude) && (
          <div>
            {icon && <img style={{ width: 28, height: 28 }} src={icon} />}
            <span>{markTitle || '去标注'}</span>
          </div>
        )}
      </div>
      <Modal
        text={selectLngLatModalText}
        visible={selectLngLatModalVisible}
        isMarkTextUseSelectAddress={isMarkTextUseSelectAddress}
        info={selectLngLatModalLngLat}
        onClose={closeSelectLngLatModal}
        onChange={ModalGetLngLat}
        bindLatestAddress={(getLatestAddress && (updateAddress as any)) || null}
      />
    </>
  )
}

export default MapSelect

弹框

javascript 复制代码

    <Modal
      visible={visible}
      destroyOnClose
      onCancel={handleClose}
      onOk={handleSubmit}
      okText="保存位置"
      title="设置定位"
    >
      <div>
        <Select
          style={{ width: '720px', marginBottom: '10px' }}
          showSearch
          defaultValue={text}
          placeholder="请输入需要查找的位置"
          onSearch={(value) => {
            debounceSearchApi(value)
          }}
          options={addressOptions}
          filterOption={false}
          onChange={handleChangeOptions}
        />
      </div>
      <div>
        <div style={{ width: '720px', height: '600px' }} ref={modalMapRef} />
      </div>
    </Modal>