大屏项目_引入高德地图(1)

引入高德地图

首先项目不是依赖高德官网搭建项目，而是使用了react-amap封装后的高德地图，使用起来比较方便

    import { Map } from 'react-amap';

使用

    const HomeScreen = () => {
         const [center, setCenter] = useState([121.44, 28.67]);
         const [mapStyle, setMapStyle] = useState('blue');
         return(
           <Map
            zoom='12'
            viewMode='3D'
            pitch={0}
            pitchEnable={false}
            events={mapEvents}
            center={center}
            mapStyle={`amap://styles/${mapStyle}`}
          >
        )
    }

此时地图没有展示出来，需要在外层套上div，设置宽高后就好

events的使用

     const [mapEvents, setMapEvents] = useState({
        created: (aMap) => {
        
          //获取地图实例
          console.log(aMap, 'aMap');
        },
        click: (e) => {
          
          //地图上的点击事件
          console.log(e);
        },
      });

根据项目需求详细的使用在后续介绍

总结

因为使用的是react-amap，写法会有所不同，需要根据react-amap拓展出高德官网的案列的功能。遇到问题找不到解决办法，盲目百度是没有结果的，只能查阅官网去自己实践