Vue3中集成高德地图并实现平移缩放功能

大家好,随着前端技术的不断发展,地图应用在我们的项目中越来越常见。本文将介绍如何在Vue3项目中集成高德地图,并通过简单的配置实现地图的平移和缩放功能。

实现步骤

1、申请高德地图密钥(Key)(已有key可跳过该步骤)

1.1 注册并登录高德开放平台

首先,你需要访问高德开放平台的官方网站:高德开放平台 | 高德地图API

1.2. 创建应用

在网站顶部导航栏中,点击"控制台"进入开发者中心。

在控制台页面,找到"应用管理"区域,点击"创建新应用"。

在创建应用的表单中,填写以下信息:

  • 应用名称:给你的应用起一个名字。
  • 应用类型:选择你的应用类型,如"Web端"、"移动端"等。
  • 应用描述:简要描述你的应用功能

应用创建成功后,你将进入应用详情页面,在这里你可以看到你的应用密钥(Key)。这个密钥是调用高德地图API时需要用到的凭证。

2、集成高德地图

方法一:

引入高德地图API 在项目根目录下的index.html文件中引入高德地图API:

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3中使用高德地图</title>
  <!-- 引入高德地图API -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的key"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

方法二:

在使用地图的页面created生命周期中注册

javascript 复制代码
  async created () {
    if (window.AMap && window.AMapUI) {
      // 已载入高德地图API,则直接初始化地图
    } else {
      // 未载入高德地图API,则先载入API再初始化
      await remoteLoad(
        `${window.location.protocol}//webapi.amap.com/maps?v=1.4.14&key=你的key`
      )
      await remoteLoad(
        `${window.location.protocol}//webapi.amap.com/ui/1.0/main.js`
      )
    }
  },

3、初始化地图

高德地图默认支持平移和缩放功能,我们只需要在初始化地图时设置相关属性即可

javascript 复制代码
<template>
  <div id="container" style="width: 100%; height: 500px;"></div>
</template>

<script>
export default {
  name: 'AMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 11, // 初始化地图层级
        center: [116.397428, 39.90923] // 初始化地图中心点
      });

      // 添加地图平移缩放控件
      map.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar());
      });
    }
  }
}
</script>
相关推荐
光影少年1 分钟前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
小磊哥er13 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆14 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021121 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->6 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端7 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试