Vue-amap 是一个基于 Vue.js 的高德地图组件库，支持在线地图和离线地图。实现高德离线地图，需要先下载离线地图数据，在 Vue-amap 中引入并配置离线地图数据即可。
以下是实现步骤：
1. 下载离线地图数据：在高德官网下载离线地图数据，下载后解压缩得到离线地图数据文件夹。
2. 在 Vue 项目中安装 vue-amap：
```
npm install vue-amap --save
```
3. 在 main.js 中引入和配置 vue-amap：
```
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'your amap key',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4',
// 配置离线地图数据路径，注意路径要使用绝对路径
uiVersion: '1.0',
map: {
// 配置离线地图数据路径，注意路径要使用绝对路径
mapStyle: 'amap://styles/whitesmoke',
features: ['bg', 'road', 'building'],
customMapStyle: {
'styleJson': [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
},
{
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}
]
},
// 配置离线地图数据路径，注意路径要使用绝对路径
zooms: [3, 20],
viewMode: '3D',
expandZoomRange: true
},
// 配置离线地图数据路径，注意路径要使用绝对路径
filePath: '/path/to/offline/map/data'
});
```
注意，需要将 filePath 设置为离线地图数据文件夹的绝对路径。
4. 在组件中使用 Vue-amap：
```
<template>
<el-amap :zoom="13" :center="center">
<el-amap-marker :position="center"></el-amap-marker>
</el-amap>
</template>
<script>
export default {
data () {
return {
center: [116.397428, 39.90923]
};
}
};
</script>
```
在 el-amap 中设置 zoom 和 center 即可显示地图。el-amap-marker 可以设置标记点。
至此，就完成了 Vue-amap 实现高德离线地图的步骤。
本文档介绍了如何在Vue项目中使用vue-amap组件集成高德地图。首先，通过npm安装vue-amap，然后在main.js中引入并初始化，需要设置高德地图的key。遇到运行报错后，发现需在高德地图官网申请key。成功申请后，重新配置main.js，并在需要显示地图的页面引入组件，设置vid、zoom、center等属性，地图即可正常显示并可进一步配置其他功能。
最低0.47元/天 解锁文章
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
