高德地图key

第一步:加载地图组件 AMapLoader.load
第二步:初始化地图组件,在地图上做标记
第三步:打开地图弹窗,new AMap.InfoWindow
第四步:搜索弹窗上的select,调用接口,返回数据展示在select上(后端模糊搜索 + 防抖)
第五步:选择心仪地址,进行回调

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

弹框

    <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>
申请高德地图key很简单,你只需要按照以下步骤操作: 1. 首先,你需要打开高德地图开放平台的官方网站(https://lbs.amap.com/)。 2. 网页打开后,点击页面上方的"开发者注册"或"立即申请"按钮。 3. 接着,你会被要求登录或注册一个新的账号。如果你已经有了高德账号,可以直接登录;否则,请点击注册并填写必要的信息完成注册。 4. 完成登录或注册后,你可以点击页面上方的"控制台"按钮,进入开发者控制台。 5. 在开发者控制台页面上,可以看到左侧菜单栏中的"我的应用"选项,点击它。 6. 在"我的应用"页中,点击右上方的"创建新应用"按钮。 7. 在创建新应用页面中,你需要填写应用的基本信息,包括应用名称、应用类型等。填写完成后,点击"确定"按钮。 8. 创建成功后,你将在"我的应用"页中看到新创建的应用,点击它进入详细信息页面。 9. 在详细信息页面中,你可以找到"应用Key",这就是你申请到的高德地图key。复制该key并妥善保管。 10. 现在,你已经成功申请到高德地图key了。你可以在自己的应用中使用该key来调用高德地图的相关接口了。 要注意的是,申请高德地图key需要遵守高德地图开放平台的相关规定和协议,确保合法使用并遵守相关法律法规。同时,使用高德地图key时还需要注意调用次数和访问权限等限制,以免违反使用规则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值