高德地图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>
相关推荐
Jacob02341 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder6 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder6 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep14 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛19 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i28 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟32 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览36 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少38 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端