Vue3中集成高德地圖并實現平移縮放功能

更新時間：2024年09月19日 09:07:33 作者：Jiaberrr

隨著前端技術的不斷發(fā)展,地圖應用在我們的項目中越來越常見,本文將介紹如何在Vue3項目中集成高德地圖,并通過簡單的配置實現地圖的平移和縮放功能,需要的朋友可以參考下

實現步驟

1、申請高德地圖密鑰（Key）（已有key可跳過該步驟）

1.1 注冊并登錄高德開放平臺

首先，你需要訪問高德開放平臺的官方網站：高德開放平臺 | 高德地圖API。

1.2. 創(chuàng)建應用

在網站頂部導航欄中，點擊“控制臺”進入開發(fā)者中心。

在控制臺頁面，找到“應用管理”區(qū)域，點擊“創(chuàng)建新應用”。

在創(chuàng)建應用的表單中，填寫以下信息：

應用名稱：給你的應用起一個名字。
應用類型：選擇你的應用類型，如“Web端”、“移動端”等。
應用描述：簡要描述你的應用功能

應用創(chuàng)建成功后，你將進入應用詳情頁面，在這里你可以看到你的應用密鑰（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, // 是否監(jiān)控地圖容器尺寸變化
        zoom: 11, // 初始化地圖層級
        center: [116.397428, 39.90923] // 初始化地圖中心點
      });
 
      // 添加地圖平移縮放控件
      map.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar());
      });
    }
  }
}
</script>

到此這篇關于Vue3中集成高德地圖并實現平移縮放功能的文章就介紹到這了,更多相關Vue3高德地圖平移縮放內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: