下面是详细讲解“Vue-Cli 3.0 中配置高德地图的两种方式”的完整攻略：

介绍

Vue-Cli 3.0 是一个快速原型开发工具，为了让开发者更加方便快捷地使用第三方组件，它提供了一种插件机制。在这篇攻略中，我们将使用 Vue-Cli 3.0 来介绍如何配置高德地图，并提供了两种配置方式。

配置方式

第一种方式：直接引入高德地图 JavaScript API

在 Vue-Cli 3.0 项目中，我们可以在 HTML 文件中直接引入高德地图的 JavaScript API，然后在 Vue 组件中使用全局对象 AMap。

下面是一个示例，我们将把地图显示在 MyMap.vue 组件中：

第一步：在 public/index.html 中引入高德地图 JavaScript API

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
    <!-- 引入高德地图 JavaScript API -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图 API key"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

第二步：使用全局对象 `AMap`

在 MyMap.vue 组件中，使用全局对象 AMap 创建一个地图实例，并在 mounted 钩子函数中初始化地图。

<template>
  <div id="map" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  mounted() {
    // 使用全局对象 AMap 创建地图实例
    var map = new AMap.Map('map', {
      zoom: 10,
      center: [116.39, 39.9]
    });
  }
}
</script>

第三步：配置高德地图显示样式

可以通过以下代码配置高德地图显示样式：

// 创建样式对象
var styleObj = [
  {
    "featureType": "land",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#dde3e1"
    }
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#a9cce3"
    }
  }
];

// 设置样式
map.setMapStyle('amap://styles/' + JSON.stringify(styleObj));

第二种方式：使用高德地图 Vue 组件

除了第一种方式，我们还可以使用高德地图官方提供的 Vue 组件来配置地图。

首先，我们需要使用 npm 安装 vue-amap：

npm install --save vue-amap

然后在 main.js 文件中注册 vue-amap：

import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: '你的高德地图 API key',
  plugin: ['AMap.Geolocation']
});

上面的 key 是你的高德地图 API key，plugin 指定需要加载的插件，这里我们加载了 AMap.Geolocation。

最后，在 MyMap.vue 组件中，可以直接使用 amap-map 组件，如下所示：

<template>
  <div>
    <amap-map :zoom="10" :center="'116.39,39.9'">
      <amap-marker :position="'116.39,39.9'"></amap-marker>
      <amap-tool-bar></amap-tool-bar>
      <amap-scale></amap-scale>
    </amap-map>
  </div>
</template>

<script>
export default {
  name: 'MyMap'
}
</script>

在上面的代码中，我们使用 amap-map 组件创建地图，并设置了地图的缩放级别和中心点，使用 amap-marker 组件创建一个标记点，然后使用 amap-tool-bar 组件和 amap-scale 组件分别创建工具栏和比例尺。

总结

上面我们介绍了在 Vue-Cli 3.0 项目中，使用两种方式配置高德地图。第一种方式是直接引用高德地图 JavaScript API，并在 Vue 组件中使用全局对象 AMap，它的优点是灵活，用户可以根据需求自定义地图，但也需要用户自己写样式。第二种方式是使用高德地图官方提供的 Vue 组件，比较方便快捷，但对于样式的定制性不如第一种方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue-Cli 3.0 中配置高德地图的两种方式 - Python技术站

Vue-Cli 3.0 中配置高德地图的两种方式

介绍