safety-eval-service-frontend/.cursor/skills/specs/10-通用业务组件使用规范/07-地图组件/SKILL.md

name	description
jjb-amap	定义 JJB 地图组件使用规范。在使用 AMap、高德地图或 jjb-react-admin-component/AMap 时使用。必须参考 MD/d.ts 文档。

通用业务组件使用规范

地图组件

⚠️ 重要约束：本章节所有组件必须严格参考 node_modules 中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

使用

import AMap from '@cqsjjb/jjb-react-admin-component/AMap'

代码演示

import { useState } from 'react';
import { Button } from 'antd';
import AMap from '@cqsjjb/jjb-react-admin-component/AMap';

function App() {
  const [ open, setOpen ] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>打开地图</Button>
      {open && (
        <AMap
          onOk={data => {
            console.log(data);
            setOpen(false);
          }}
          onCacnel={() => {
            setOpen(false);
          }}
        />
      )}
    </>
  )
}

API

属性	说明	类型	默认值
lng	经度	number	116.404
lat	纬度	number	39.915
title	弹窗标题	string	高德地图
width	弹窗宽度	number	700
onOk	确认回调	(data: { lng: number, lat: number, comp: IComp, compText: Text }) => void	-
onCancel	取消回调	() => void	-

确认回调-IComp

属性	说明	类型	默认值
province	省份	string	-
city	城市	string	-
district	区县	string	-
street	街道	string	-
streetNumber	门牌号	string	-

常见问题

1. 加载地图失败，缺少必要的文件！

   请确认应用 jjb.config.js 文件 windowInject.sctipts 中是否导入高德地图SDK。

2. onOk确认回调compText为undefined

   请确认高德地图是否授权Web应用。