npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiw/react-amap-map

v6.0.2

Published

基于 React 封装的高德地图组件。AMap Component Based On React.

Downloads

855

Readme

Map 组件

Buy me a coffee npm version Downloads

Map 组件是其他组件的基础,Map 组件会通过 Context 给所有的子组件提供 mapcontainerAMap,对象。

⚠️ 注意

  1. 组件 <Map> 必须包裹在 <APILoader> 组件内,该组件作用是加载高德地图 SDK。
  2. 其他地图组件必须作为 <Map> 的子组件使用;
  3. 在 ~~v2.5.0+~~ -> v5 通过 props 传递 mapcontainerAMap 对象,在 v6 版本中移除了,通过 Context 传递对象
import { Map, APILoader } from '@uiw/react-amap';
// 或者单独安装使用
import { Map } from '@uiw/react-amap-map';

基本用法

Map 的父组件必须具有宽度和高度;

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, APILoader } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Map />
    </APILoader>
  </div>
);

export default Demo

useMapContext

通过 React 的 Context 提供了一个无需为每层组件手动注入 ~~map~~,~~container~~ 和 ~~AMap~~ 三个属性 props,就能在组件树间进行传递。

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useMap, useMapContext, APILoader, Provider } from '@uiw/react-amap';

const Marker = () => {
  const warpper = useRef(null);
  const { map, state } = useMapContext();
  const { setContainer } = useMap({
    container: warpper.current,
    center: [116.397428, 39.90923],
    zoom: 10
  });

  useEffect(() => {
    if (map) {
      const marker = new AMap.Marker({
        icon: new AMap.Icon({
          imageSize: new AMap.Size(25, 34),
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
        }),
        position: [116.405285,39.904989],
        offset: new AMap.Pixel(-13, -30)
      });
      // 创建点标记
      const marker1 = new AMap.Marker({
        position: new AMap.LngLat(116.32945,39.939772)
      });
      map.add(marker1);
      marker.setMap(state.map);
    }
  }, [map]);
  
  useEffect(() => {
    if (warpper.current) {
      setContainer(warpper.current);
    }
  }, [warpper.current]);

  return <div ref={warpper} style={{ height: 300 }} />;
}

const Demo = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Provider>
      <Marker />
    </Provider>
  </APILoader>
);

export default Demo
import { useMapContext, Provider } from '@uiw/react-amap';

const { AMaps, map, container, state, dispatch } = useMapContext();
// => state.AMaps
// => state.map
// => state.container

参数设置

import ReactDOM from 'react-dom';
import React, { Fragment, useState } from 'react';
import { Map, APILoader } from '@uiw/react-amap';

function Demo() {
  const [dragEnable, setDragEnable] = useState(true);
  const [display, setDisplay] = useState(true);
  const [zoom, setZoom] = useState(15);
  const [center, setCenter] = useState([116.397428, 39.90923]);
  const [viewMode, setViewMode] = useState('3D');
  return (
    <Fragment>
      <button onClick={() => setDragEnable(!dragEnable)}>{dragEnable ? '禁用' : '启用'}拖拽</button>
      <button onClick={() => setDisplay(!display)}>{display ? '卸载' : '加载'}地图</button>
      <button onClick={() => setViewMode(viewMode === '3D' ? '2D' : '3D')}>{viewMode}地图</button>
      <button onClick={() => setZoom(zoom + 1)}>放大 +1 -> ({zoom})</button>
      <button onClick={() => setZoom(zoom - 1)}>缩小 -1 -> ({zoom})</button>
      <button onClick={() => setZoom(zoom - 1)}>缩小 -1 -> ({zoom})</button>
      <button onClick={() => setCenter([121.394147,31.262488])}>上海</button>
      <button onClick={() => setCenter([116.397428, 39.90923])}>北京</button>
      <div style={{ width: '100%', height: 350 }}>
        {display && (
          <Map
            dragEnable={dragEnable}
            zoom={zoom}
            center={center}
            viewMode={viewMode}
            pitch={viewMode === '2D' ? 0 : 70}
          />
        )}
      </div>
    </Fragment>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;

Ref

获取地图实例对象。

import ReactDOM from 'react-dom';
import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader } from '@uiw/react-amap';

function Demo() {
  const mapRef = useRef();
  useEffect(() => {
    console.log('mapRef:', mapRef)
  }, []);
  return (
    <div style={{ width: '100%', height: 130 }}>
      <Map
        layers={[new AMap.TileLayer.Satellite()]}
        ref={(instance) => {
          if (instance && instance.map) {
            const bounds = instance.map.getBounds();
            console.log('instance', instance);
          }
        }}
      />
      <Map
        layers={[new AMap.TileLayer.Satellite()]}
        ref={mapRef}
      />
    </div>
  );
}

const Mount = () => (
  <div style={{ width: '100%', height: '300px' }}>
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
  </div>
);

export default Mount;

事件触发

import ReactDOM from 'react-dom';
import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Map
        onComplete={(data, de) => {
          console.log('地图加载完成!', data, de);
        }}
        onClick={() => {
          console.log('点击事件!');
        }}
      />
    </APILoader>
  </div>
);

export default Demo

特殊使用方法

通过 Map 的子组件函数,返回三个对象 mapcontainerAMap

import ReactDOM from 'react-dom';
import React, { useEffect, useRef, Fragment } from 'react';
import { Map, APILoader, ScaleControl, ToolBarControl, ControlBarControl, Geolocation } from '@uiw/react-amap';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <Map center={[116.397428, 39.90923]} zoom={12}>
      {({ AMap, map, container }) => {
        console.log('map', map)
        if (map) {
          const marker = new AMap.Marker({
            icon: new AMap.Icon({
              imageSize: new AMap.Size(25, 34),
              image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
            }),
            position: [116.405285,39.904989],
            offset: new AMap.Pixel(-13, -30)
          });
          marker.setMap(map);
        }
        return;
      }}
    </Map>
  </div>
);

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;

将子组件封装到一个组件中

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Polyline, ToolBarControl } from '@uiw/react-amap';

const path1 = [ [121.099109,31.222311], [118.528308,31.989555], [117.319812,31.803006], [114.353503,30.67583], [115.891589,28.979429], [112.947253,28.188361], ];
const path2 = [ [116.405289, 39.904987], [113.964458, 40.54664], [111.47836, 41.135964], [108.949297, 41.670904], [106.380111, 42.149509], [103.774185, 42.56996], [101.135432, 42.930601], [98.46826, 43.229964], [95.777529, 43.466798], [93.068486, 43.64009], [90.34669, 43.749086], [87.61792, 43.793308], ];

const ChildComp = (props = {}) => {
  return (
    <div>
      <Polyline {...props} visiable={true} strokeOpacity={1} path={path1} />
      <Polyline {...props} visiable={true} strokeOpacity={1} path={path2} />
    </div>
  )
}

const Demo = () => {
  const [show, setShow] = useState(true);
  return (
    <div style={{ width: '100%', height: '300px' }}>
      <Map zoom={3}>
        {(props) => {
          return <ChildComp {...props} />;
        }}
      </Map>
    </div>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;

Props

更多参数设置

| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | container | (默认不需要传递) 构造一个地图对象,参数 container 中传入地图容器 DIV 对象。注意:地图容器在创建之前必须拥有实际大小,否则可能出现底图无法渲染的问题。 | HTMLDivElement | - | | center | 初始中心经纬度 | [number, number] \| LngLat | - |

事件

事件类型文档

| 参数 | 说明 | 类型 | | ---- | ---- | ---- | | onComplete | 地图资源加载完成后触发事件 | - | | onMouseMove | 鼠标在地图上移动时触发 | - | | onZoomChange | 地图缩放级别更改后触发 | - | | onMapMove | 地图平移时触发事件 | - | | onMouseWheel | 鼠标滚轮开始缩放地图时触发 | - | | onZoomStart | 缩放开始时触发 | - | | onMouseOver | 鼠标移入地图容器内时触发 | - | | onMouseOut | 鼠标移出地图容器时触发 | - | | onDblClick | 鼠标左键双击事件 | - | | onClick | 鼠标左键单击事件 | - | | onZoomEnd | 缩放结束时触发 | - | | onMoveEnd | 地图移动结束后触发,包括平移,以及中心点变化的缩放。如地图有拖拽缓动效果,则在缓动结束后触发 | - | | onMouseUp | 鼠标在地图上单击抬起时触发 | - | | onMouseDown | 鼠标在地图上单击按下时触发 | - | | onRightClick | 鼠标右键单击事件 | - | | onMoveStart | 地图平移开始时触发 | - | | onDragStart | 开始拖拽地图时触发 | - | | onDragging | 拖拽地图过程中触发 | - | | onDragEnd | 停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发 | - | | onHotspotOut | 鼠标移出热点时触发 | - | | onHotspotOver | 鼠标滑过热点时触发 | - | | onTouchStart | 触摸开始时触发事件,仅适用移动设备 | - | | onHotspotClick | 鼠标点击热点时触发 | - | | onTouchMove | 拖拽地图过程中触发,仅适用移动设备 | - | | onTouchEnd | 触摸结束时触发事件,仅适用移动设备 | - | | onResize | 地图容器尺寸改变事件 | - |