Vue/React项目中轻松上手高德地图API：一步步助力地理位置显示

前端

2023-12-12 10:52:46

高德地图API简介

高德地图API是高德地图提供的JavaScript API，可供开发人员在网页或移动应用中嵌入地图。高德地图API提供了丰富的功能，包括地图加载、定位服务、路线规划、周边搜索等，可以满足各种地图应用的需要。

Vue/React项目中使用高德地图API

在Vue/React项目中使用高德地图API，需要按照以下步骤进行：

安装依赖

首先，需要在项目中安装高德地图API的依赖包。对于Vue项目，可以使用以下命令安装：
```
npm install amap-jsapi
```
对于React项目，可以使用以下命令安装：
```
npm install react-amap-jsapi
```

创建Loader

安装依赖包后，需要创建一个Loader组件来加载高德地图API。在Vue项目中，可以在src/components目录下创建一个名为AMapLoader.vue的文件，并在其中写入以下代码：

<template>
  <div id="amap-container"></div>
</template>

<script>
import AMap from 'amap-jsapi';

export default {
  mounted() {
    this.initAMap();
  },

  methods: {
    initAMap() {
      // 创建地图实例
      this.map = new AMap.Map('amap-container', {
        resizeEnable: true,
        center: [116.405465, 39.907764],
        zoom: 11
      });
    }
  }
};
</script>

在React项目中，可以在src/components目录下创建一个名为AMapLoader.js的文件，并在其中写入以下代码：

import React, { useEffect } from 'react';
import AMap from 'react-amap-jsapi';

const AMapLoader = () => {
  useEffect(() => {
    // 创建地图实例
    const map = new AMap.Map('amap-container', {
      resizeEnable: true,
      center: [116.405465, 39.907764],
      zoom: 11
    });
  }, []);

  return (
    <div id="amap-container"></div>
  );
};

export default AMapLoader;

如果还没有高德Key, 需要去高德开放平台申请Key
加载API

在项目中加载高德地图API，需要在<head>标签中添加以下代码：
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>
```
其中，YOUR_API_KEY需要替换为您的高德地图API密钥。

访问页面

加载高德地图API后，即可在页面中使用高德地图API提供的各种功能。例如，可以在Vue项目中使用以下代码在地图上添加一个标记：

<template>
  <amap-loader />

  <div id="marker-container">
    <amap-marker :position="[116.405465, 39.907764]"></amap-marker>
  </div>
</template>

<script>
import AMapLoader from './AMapLoader.vue';
import AMapMarker from 'amap-jsapi-vue/components/marker';

export default {
  components: {
    AMapLoader,
    AMapMarker
  }
};
</script>

在React项目中，可以使用以下代码在地图上添加一个标记：

import React, { useState } from 'react';
import AMapLoader from './AMapLoader';
import AMapMarker from 'react-amap-jsapi/lib/marker';

const App = () => {
  const [markers, setMarkers] = useState([
    {
      position: [116.405465, 39.907764]
    }
  ]);

  return (
    <div>
      <AMapLoader />

      <div id="marker-container">
        {markers.map((marker, index) => (
          <AMapMarker key={index} position={marker.position} />
        ))}
      </div>
    </div>
  );
};

export default App;