vue 高德地图 0 基础

Vue.js 是一种流行的 JavaScript 框架，用于构建交互式 Web 应用程序。高德地图是一种流行的地图服务，用于在 Web 应用程序中显示地图和位置信息。在本文中，我们将介绍如何在 Vue.js 应用程序中使用高德地图服务。

首先，要使用高德地图服务，您需要注册一个开发者帐户，然后创建一个 API 密钥。API 密钥是一个用于访问高德地图服务的唯一标识符。

在 Vue.js 应用程序中使用高德地图服务，您需要安装 Vue.js 的官方地图组件库 vue-amap。您可以使用 npm 包管理器安装它：

npm install vue-amap --save

一旦安装了 vue-amap，您需要在 Vue.js 应用程序中注册它。您可以在 main.js 文件中进行注册：

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'your amap key',
  // 插件集合
  plugin: ['AMap.Geolocation']
});

在注册 vue-amap 后，您可以在 Vue.js 组件中使用地图。以下是一个简单的 Vue.js 组件示例，它使用高德地图服务显示一个地图：

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

<script>
export default {
  name: 'Map',

  data() {
    return {
      map: null,
    };
  },

  mounted() {
    // 创建地图实例
    this.map = new AMap.Map('map-container', {
      zoom: 14,
      center: [116.39, 39.9],
    });

    // 添加定位插件
    this.map.plugin('AMap.Geolocation', () => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
      });

      this.map.addControl(geolocation);

      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          console.log(result);
        } else {
          console.log('定位失败');
        }
      });
    });
  },
};
</script>

在此示例中，我们创建了一个名为 Map 的 Vue.js 组件。在 mounted 钩子函数中，我们创建了一个新的地图实例，并将其显示在 id 为 map-container 的 div 元素中。我们还添加了一个定位插件，以便在地图上显示当前位置。

这是一个非常简单的例子，您可以根据需要进行进一步的自定义和配置。对于更高级的地图功能，您可以查看 Vue.js 的官方文档和高德地图服务的开发人员文档。