react-amap的使用

<ReactMap
        mapList={trackList ? trackList : []}
        zoom={15}
        width='100%'
        height='calc(100% - 220px)'
        // center={trackList[5]} //中心坐标
      />
      

import React, { useState } from 'react';
import { Map, Marker, Polyline } from 'react-amap';
import mapStart from '@@/static/img/mapStart.png';
import mapEnd from '@@/static/img/mapEnd.png';
import './index.css';

function ReactMap(props: MapType.MapPropType) {
  const { mapList, zoom, center, width, height } = props;
  // 筛选经度纬度为0的数据
  const newList = mapList.filter((x) => {
    return Number(x.latitude) && Number(x.longitude) !== 0;
  });
  // 地图实例
  const [mapInstance, setMapInstance] = useState(null);

  const nullList = { latitude: '', longitude: '' };

  return (
    <>
      <div id='conatiner' className='reactMap' style={{ width, height }}>
        {newList.length > 1 ? (
          <Map
            amapkey={'04f0dcbf53e56defb0ce1fe95581a0e6'}
            zoom={zoom} //地图显示的缩放级别
            center={mapList[0]} //地图中心点坐标值
            doubleClickZoom={true}
            zoomEnable={true}
            scrollWheel={true}
            touchZoom={true}
            dragEnable={true}
            events={{
              created: (map) => {
                if (!mapInstance) setMapInstance(map);
              }
            }}
          >
            <Marker
              position={mapList ? mapList[0] : nullList}
              offset={[-24, -34.8]} // 偏移量
            >
              <img className='iconTitle' src={mapStart} />
            </Marker>

            <Marker
              position={mapList[mapList.length - 1]}
              offset={[-24, -34.8]}
            >
              <img className='iconTitle' src={mapEnd} />
            </Marker>
            <Polyline
              style={{
                strokeWeight: 4, //线条宽度
                strokeColor: '#00AF98', //线条颜色
                lineCap: 'round', //折线两端线帽的绘制样式
                lineJoin: 'round' //折线拐点的绘制样式
                // isOutline: true, //线条是否带描边
                // outlineColor: 'blue', //线条描边颜色xw
                // showDir: 'true' //是否延路径显示白色方向箭头
                // geodesic: false //是否绘制成大地线
              }}
              events={{
                created: () => {
                  mapInstance.setFitView();
                }
              }}
              path={newList}
              visible={true} //点标记是否可见
              draggable={false} //设置折线是否可拖拽移动
            />
          </Map>
        ) : (
          <Map
            amapkey={'04f0dcbf53e56defb0ce1fe95581a0e6'}
            zoom={zoom} //地图显示的缩放级别
            center={center} //地图中心点坐标值
            events={{
              created: (map) => {
                if (!mapInstance) setMapInstance(map);
              }
            }}
          />
        )}
      </div>
    </>
  );
}
export default ReactMap;