高德地图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>
相关推荐
开开心心就好39 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享40 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js