高德地图 map react-amap

 

下载插件

npm i react-amap -D 

 

引入插件

 

import { Map, Marker } from 'react-amap';

 

 const amapEvents ={

    created: (mapInstance) => {

      AMap.plugin('AMap.Geolocation', function () {

        const geolocation = new AMap.Geolocation({

          enableHighAccuracy: true, // 是否使用高精度定位，默认:true

          timeout: 10000, // 超过10秒后停止定位，默认：无穷大

          maximumAge: 0, // 定位结果缓存0毫秒，默认：0

          convert: false, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true

          showButton: false, // 显示定位按钮，默认：true

          buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角

          buttonOffset: new AMap.Pixel(20, 167), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

          showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：true

          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true

          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认：true

          zoomToAccuracy: false, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

        });

        mapInstance.addControl(geolocation);

        Loading.show({});

        geolocation.getCurrentPosition();

        AMap.event.addListener(geolocation, 'complete', (res) => {

          console.log(res);

          const lng = res.position.lng;

          const lat = res.position.lat;

          getrowordList({

            location: `${lng},${lat}`, // 坐标

            distance: 5000, // 范围

            pageNum: 1, // 页码

            pageSize: 20, // 展示数量

            areaCode: city?.code ? city.code : 201, // 城市编码

          });

        }); // 返回定位信息

      });

    },

    // map移动事件

    moveend: (e) => {

      console.log('移动事件', e, 212121221);

      const post = amap.getCenter(); // 获取中心点坐标  amap 实在map创建其拿到的mapInstance

      console.log(amap.getCenter(), amap.getBounds(), `${post.lng},${post.lat}`);

    },

    dragstart: showInfoDragstart, // 开始拖拽

    dragging: showInfoDragging, // 拖拽中

    dragend: showInfoDragend, // 拖拽结束

    // map缩放事件

    zoomend: (e) => {

      console.log('缩放', e, 33333333);

    },

    // 点击事件

    click: (e) => {

      console.log('点击', e);

    },

  };

<Map
          center={[data[0].longitude, data[0].latitude]} // 定位的坐标
          amapkey=x'x'x// 申请的key码
          plugins={[
            {
              name: 'ToolBar',
              options: {
                visible: true,
                onCreated(ins) {
                  console.log(ins);
                },
              },
            },// 放大缩小
            'MapType',
            'Scale',
            'OverView',
            'ControlBar',
          ]}
          events={amapEvents}
          resizeEnable={true}
          zoom={10}
        >
          {data &&
            data.map((item, index) => {
              return (
                <Marker
                  key={index}
                  position={[item.longitude, item.latitude]}
                  events={{
                    click: (markerInstance) => {
                      console.log(markerInstance);
                    },
                  }}
                >
                  <div
                    className={activeId === item.id ? Style.activePosTiion : Style.posTiion}
                    onClick={() => {
                      console.log(item.id);
                      setActiveId(item.id);
                    }}
                  >
                    <span className={activeId === item.id ? Style.posTH : Style.posTHDin}>
                      <span>x'x'x'x'x</span>&nbsp;|&nbsp;
                      <span>x'xx'x</span>
                    </span>
                  </div>
                </Marker>
              );
            })}
        </Map>

 

上面是我自己写的，可以借鉴

后期会补的