react 使用高德地图

高德地图api文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

安装

安装推荐使用 JSAPI Loader 进行加载，使用npm安装，引入包的大小非常小。

安装方式

npm i @amap/amap-jsapi-loader 或 yarn add @amap/amap-jsapi-loader
// 官方加了-dev， 加了-dev字段就只能在本地的时候使用，部署到服务器后就不引入包

注册高德地图账号并申请Key

注册和申请Key按照官方或者度娘的流程走就可以了。该部分部署本文重点，顾省略

使用

封装方法

// loadAMap.ts

import AMapLoader from '@amap/amap-jsapi-loader';

export const createAMap = (id = 'container',config = {}) => {
  return new Promise((yes, no) => {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.MarkerClusterer', 'AMap.ControlBar'], //插件列表
    })
      .then((AMap) => {
       const map =  new AMap.Map(id, {
            zoom: 18,//级别
            viewMode: '3D',//使用3D视图
            mapStyle: 'amap://styles/62882cda859b407510b91f26a61d29a1', //设置地图的显示样式
            resizeEnable: true,
            pitchEnable: true,
            rotateEnable: true,
            pitch: 45,
            ...config
          });
        yes({
            map,
            AMap
        });
      })
      .catch((e) => {
        console.log('高德地图错误', e);
        no(e);
      });
  });
};

使用该方法

import { createAMap } from '../../../utils/loadAMap';

const config: LoadMapConfig = {
      // center: [116.397428, 39.90923], // [纬度，经度]  中心点坐标
      // center: [120.0900920089704, 31.7239991416814],
      resizeEnable: true,
      pitchEnable: true,
      rotateEnable: true,
      viewMode: '3D', //使用3D视图
      pitch: 45,
      mapStyle: 'amap://styles/62882cda859b407510b91f26a61d29a1', //设置地图的显示样式
      zoom: 18
    };
    const initMap: any = await createAMap('container', config);
    const { map, AMap } = initMap;
    // 添加插件
    AMap.plugin(['AMap.ControlBar'], function() {
      // 添加 3D 罗盘控制
      if (state.hideScreenHeader) {
        map.addControl(new AMap.ControlBar({ position: { right: '450px', top: '595px' } }));
      } else {
        map.addControl(new AMap.ControlBar({ position: { right: '450px', top: '700px' } }));
      }
    })

    const KEY: string = ''; // 此处的KEY需要
    const googleLayer: any = new AMap.TileLayer({
      // 天地图底图图块取图地址
      getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=${KEY}&x=[x]&y=[y]&l=[z]`,
      zIndex: 100
    });
    map.add(googleLayer);