uiwjs / react-amap

基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-amap
MIT License
422 stars 69 forks source link

如果可以加一个这个控件, 那就太棒了 #124

Closed evanyangg closed 3 years ago

evanyangg commented 3 years ago

https://l7.antv.vision/zh/examples/draw/UI#amap image

jaywcjlove commented 3 years ago

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

map 扔给你了,你可以基于官方示例实现,下一个版本,会独立每一个组件 到单独的包中,不然体积越来越大。

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>
);

ReactDOM.render((
  <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
), _mount_);
evanyangg commented 3 years ago

image 鼠标工具 好像还没放到type里面

evanyangg commented 3 years ago

AMap.PolyEditor 还有这个

jaywcjlove commented 3 years ago

@evanyangg Upgrade @uiw/react-amap@1.8.6

jaywcjlove commented 3 years ago

@evanyangg 现在提供了一个 PolyEditor 组件。

evanyangg commented 3 years ago

@jaywcjlove 👍👍👍