React项目集成高德地图的优雅姿势

2023-12-08 09:04:48

在React项目中，优雅地集成高德地图，可以极大提升地图功能的使用体验。本文将介绍两种集成方式，并深入探讨它们的优缺点，帮助开发者选择最适合自己项目的方案。

方案一：裸游

1. 引入高德JS API

在项目根目录的index.html中，引入高德JS API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

2. 开发业务逻辑

在组件中，使用高德JS API开发业务逻辑，例如创建地图、添加标记、绘制路径等。

import React, { useEffect } from 'react';

const MyMap = () => {
  useEffect(() => {
    // 创建地图
    const map = new AMap.Map('myMap', {
      zoom: 12,
      center: [116.405285, 39.904989],
    });

    // 添加标记
    new AMap.Marker({
      position: new AMap.LngLat(116.405285, 39.904989),
      title: '我的位置',
    }).setMap(map);
  }, []);

  return <div id="myMap" style={{ width: '100%', height: '500px' }}></div>;
};

export default MyMap;

优点：

简单易上手，无需额外配置。

缺点：

需要在index.html手动引入高德JS API，存在大量冗余代码。
无法跨项目使用，每个项目都需要手动引入高德JS API。

方案二：使用第三方库

目前市面上有很多第三方库可以帮助我们优雅地集成高德地图，例如react-amap、@amap/amap-jsapi等。以下以react-amap为例，演示如何使用第三方库集成高德地图。

1. 安装依赖

npm install react-amap --save

2. 配置高德JS API key

在项目根目录下新建.env文件，并写入高德JS API key：

REACT_APP_AMAP_KEY=YOUR_API_KEY

3. 开发业务逻辑

在组件中，使用react-amap提供的组件开发业务逻辑。

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

const MyMap = () => {
  return (
    <Map amapkey={process.env.REACT_APP_AMAP_KEY} zoom={12} center={[116.405285, 39.904989]}>
      <Marker position={[116.405285, 39.904989]} title="我的位置" />
    </Map>
  );
};

export default MyMap;