【高德地图】基本使用教程（玩转地图）（vue2+vue3）

最新推荐文章于 2025-09-09 15:33:32 发布

原创最新推荐文章于 2025-09-09 15:33:32 发布 · 961 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

功能实现专栏收录该内容

24 篇文章

订阅专栏

简介

带大家一步步实现地图显示特定位置，或定位到当前位置。并且拖拽地图界面能够查询出指定位置周边的信息。通过关键字搜索周边信息。

本教程适合初学者。

一、获取使用高德api的key

打开高德开发平台，登录后，鼠标覆盖右上角头像，点击应用管理进入到我的应用界面。

点击右上角创建新应用。

为该应用添加一个 key。

二、在项目中引入地图API

2.1 在Html中简单引入

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script>
    var map = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
        zoom:11, // 初始化地图层级
        center: [116.397428, 39.90923] // 初始化地图中心点
    });
</script>
</body>
</html>

2.2 JS API 结合Vue使用

2.2.1 按 NPM 方式安装使用 Loader

npm i @amap/amap-jsapi-loader --save

2.2.2 新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件，用作地图组件。

2.2.3 创建地图容器

在 MapContainer.vue 地图组件中创建 div 标签作为地图容器，并设置地图容器的 id 属性为 container。

vue 2 中的组件形式

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "「你申请的安全密钥」",
      };
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

在vue3中组件形式

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

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

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>