vue中使用高德地图的方法

示例

前提条件

• 已安装vue-cli
• 已注册高德地图开发者账号
• 已申请并获取到高德地图的API Key

步骤

1.安装高德地图JavaScript API

在你的项目中安装高德地图JavaScript API。在命令行中输入：

npm install @amap/amap-jsapi-loader --save

2.创建地图组件

在src/components目录下创建Map.vue文件，并在其中添加以下代码：

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

<script>
import { AMapJSAPIWrapper } from "@amap/amap-jsapi-loader";

export default {
  name: "Map",
  props: {
    apiKey: {
      type: String,
      default: ""
    },
    center: {
      type: Array,
      default: () => [116.397428, 39.90923]
    },
    zoom: {
      type: Number,
      default: 13
    }
  },
  data() {
    return {
      map: null
    };
  },
  async mounted() {
    const amapLoader = new AMapJSAPIWrapper({
      key: this.apiKey,
      version: "2.0",
      plugins: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"]
    });
    const AMap = await amapLoader.load();
    this.map = new AMap.Map("map", {
      zoom: this.zoom,
      center: this.center
    });
  }
};
</script>

<style>
#map {
  width: 100%;
  height: 100%;
}
</style>

此组件接受三个参数：

• apiKey（必需）：高德地图的API Key
• center（可选）：地图中心点的经纬度坐标。默认值为[116.397428, 39.90923]（北京市中心）
• zoom（可选）：地图的缩放级别。默认值为13

3.在App.vue中使用地图组件

在App.vue文件中引入Map组件，并将apiKey传递给它：

<template>
  <div id="app">
    <Map :apiKey="apiKey" />
  </div>
</template>

<script>
import Map from "./components/Map.vue";

export default {
  name: "App",
  components: {
    Map
  },
  data() {
    return {
      apiKey: "your api key"
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

替换"your api key"成你自己申请的API Key。

4.运行项目

在命令行中输入以下命令以运行项目：

npm run serve

现在你应该能够在浏览器中看到一个显示高德地图的页面。

结束语

在这个示例中，我们演示了如何使用vue-cli和高德地图JavaScript API创建一个简单的地图应用。你可以在此基础上添加更多的功能和交互。