Vue3中集成高德地图并实现平移缩放功能
更新时间：2024年09月19日 09:07:33 作者：Jiaberrr
随着前端技术的不断发展,地图应用在我们的项目中越来越常见,本文将介绍如何在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生命周期中注册
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、初始化地图
高德地图默认支持平移和缩放功能，我们只需要在初始化地图时设置相关属性即可
<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>
到此这篇关于Vue3中集成高德地图并实现平移缩放功能的文章就介绍到这了,更多相关Vue3高德地图平移缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序2017-08-08
vue-codemirror是一个基于Vue的代码在线编辑器组件,它封装了CodeMirror编辑器,使得在Vue项目中可以方便地使用CodeMirror,下面我们就来看看vue-codemirror的具体使用吧2024-02-02
这篇文章主要介绍了Vue 无限滚动加载指令的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
在项目开发中，如果使用到了 vuex，通常我会将所有的接口请求单独用一个文件管理，这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中，本文给大家分享完整流程需要的朋友可以参考下2022-11-11
Ant Design Vue table组件如何自定义分页器
这篇文章主要介绍了Ant Design Vue table组件如何自定义分页器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了详解基于Vue-cli搭建的项目如何和后台交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家学习介绍了Vue如何利用FormData和axios实现图片上传功能，本文为大家整理了详细步骤，感兴趣的小伙伴可以了解一下2023-08-08
vue3 中使用vue img cutter 图片裁剪插件的方法
这篇文章主要介绍了vue3 中使用vue img cutter 图片裁剪插件的方法,首先安装依赖,构建 components/ImgCutter.vue 组件,需要的朋友可以参考下2024-05-05
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
这篇文章主要介绍了使用Typescript封装一个Vue组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
在本篇文章中，我们给大家详细讲述了vue中如何配置less的详细代码和步骤，有需要的朋友跟着学习下。2018-09-09
最新评论