vue简单使用高德地图

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。而高德地图是一个非常流行的地图服务提供商，提供了丰富的地图 API，可以在前端页面中轻松使用。下面是简单介绍如何在 Vue.js 中使用高德地图。

首先，你需要在 index.html 中引入高德地图的 JavaScript API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API Key"></script>

然后，在 Vue 组件中，你可以通过以下方式来创建一个地图：

// 引入高德地图
import AMap from 'AMap';

// 创建组件
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // 初始化地图
    this.map = new AMap.Map('map-container', {
      zoom: 10, // 地图缩放级别
      center: [116.397428, 39.90923] // 地图中心点坐标
    });
  }
}

在上面的代码中，我们首先通过 `import` 引入了高德地图，并在组件中定义了一个 `map` 变量来存储地图实例。在 `mounted` 钩子函数中，我们使用 `new AMap.Map()` 创建了一个地图实例，并传入了一些参数，比如地图缩放级别和中心点坐标。

最后，我们需要在模板中添加一个容器元素，用于显示地图：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>

这里的 `id` 属性需要和我们在创建地图实例时传入的容器元素的 `id` 属性相同。