高德地图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>
相关推荐
不想有bug的小菜鸟3 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238634 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559604 分钟前
前端代理,解决跨域问题讲解
前端
quitv9 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238118 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星20 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-39 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen43 分钟前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3