JSPM

@lbh7/react-amap

1.0.7
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q25414F
  • License MIT

高德地图 React 组件

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lbh7/react-amap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme



    高德地图 React 组件 logo

    高德地图 React 组件

    Buy me a coffee Build & Deploy Downloads Open in unpkg npm version Gitee Repo

    这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。除了必须引用的 APILoader/Map 组件外,我们目前提供了最常用的地图组件,能满足大部分简单的业务场景;如果你有更复杂的需求,或者觉得默认提供的组件功能不够,可以使用 Map 组件返回的地图实例,完全自定义一个地图组件,然后根据高德原生 API 做高德允许你做的一切事情。

    文档实例预览: Github Web | Gitee Web

    特性

    • ♻️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK。
    • 📚 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释)。
    • ⚛️ 支持 React Hook 新增特性(需要 React 16.8+)。
    • 💝 不依赖任何第三方组件。
    • 📦 拆分成多个包,按需使用包。

    安装

    不依赖 uiw 组件库

    # 集成了所有依赖包
    npm install @lbh7/react-amap --save
    
    # 或者按需安装包
    npm install @lbh7/react-amap-map @lbh7/react-amap-api-loader --save

    v4 升级到 v5APILoader 主要是对 APILoader 做了升级,akay => akey

     <APILoader
    -  akay
    -  protocol
    -  hostAndPath
    -  callbackName
    -  plugin
    -  disableScripts
    +  akey
    +  plugins
    +  AMapUI
    +  Loca
    >
      <Map style={{ height: 100 }} />
     </APILoader>

    使用

    Open in CodeSandbox

    import ReactDOM from 'react-dom';
    import React, { useEffect, useRef, Fragment } from 'react';
    import { Map, APILoader, ScaleControl, ToolBarControl, ControlBarControl, Geolocation } from '@lbh7/react-amap';
    
    const Demo = () => (
      <div>
        <Map style={{ height: 300 }}>
          <ScaleControl offset={[16, 30]} position="LB" />
          <ToolBarControl offset={[16, 10]} position="RB" />
          <ControlBarControl offset={[16, 180]} position="RB" />
          <Geolocation
            maximumAge={100000}
            borderRadius="5px"
            position="RB"
            offset={[16, 80]}
            zoomToAccuracy={true}
            showCircle={true}
          />
        </Map>
        <Map style={{ height: 300 }}>
          {({ AMap, map, container }) => {
            return;
          }}
        </Map>
      </div>
    );
    
    const Mount = () => (
      <APILoader version="2.0.5" akey="a7a90e05a37d3f6bf76d4a9032fc9129">
        <Demo />
      </APILoader>
    )
    export default Mount

    容器组件

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap 集成所有包 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-api-loader 加载 SDK (必须) bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-map 加载地图(容器) bundle size bundle size(gzip) npm version Open in unpkg

    控件组件

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap-scale-control bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-control-bar-control bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-hawk-eye-control bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-map-type-control bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-tool-bar-control bundle size bundle size(gzip) npm version Open in unpkg

    覆盖物

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap-marker 点标记 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-label-marker 点标记 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-text 文本标记 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-tile-layer 文本标记 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-polyline 折线 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-polyline-editor 折线编辑器 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-poly-editor 折线编辑器 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-circle 圆形 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-circle-marker 圆点标记 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-ellipse 圆形组件 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-rectangle 矩形 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-bezier-curve 贝塞尔曲线 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-polygon 多边形 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-polygon-editor 多边形 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-mass-marks 海量点 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-mouse-tool 绘制工具 bundle size bundle size(gzip) npm version Open in unpkg

    信息窗体 & 右键菜单

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap-info-window 信息窗体 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-context-menu 右键菜单 bundle size bundle size(gzip) npm version Open in unpkg

    服务

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap-geolocation 定位 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-weather 天气查询服务 bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-auto-complete 输入提示 bundle size bundle size(gzip) npm version Open in unpkg

    其它

    Package Bundle size(gzip) Version/unpkg
    @lbh7/react-amap-require-script bundle size bundle size(gzip) npm version Open in unpkg
    @lbh7/react-amap-types 类型定义 npm version Open in unpkg
    @lbh7/react-amap-utils bundle size bundle size(gzip) npm version Open in unpkg

    开发

    npm install         # Step 1: 安装依赖
    npm run build       # Step 2: 编译所有包
    
    npm run start       # 文档网站运行
    npm run watch:amap  # 监听编译输出 js 文件, 监听编译输出 .d.ts 类型文件

    相关连接

    Contributors

    As always, thanks to our amazing contributors!

    Made with contributors.

    License

    Licensed under the MIT License.