下面是详细讲解“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技术站
微信扫一扫 
支付宝扫一扫 