如何利用vue+高德API搭建前端环境页面

更新时间：2025年02月28日 10:09:27 作者：张謹礧

这篇文章主要介绍了如何使用Vue和高德API搭建一个前端页面,实现了地图的加载和卫星图层、路网图层的管理,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下

一、模板部分（<template>）

html

<template>
  <div class="page-container">
    <div id="container"></div>
  </div>
</template>

这部分使用 Vue 的模板语法，定义了组件的 HTML 结构。
- 包含一个 div 元素，类名为 page-container，它可能是整个页面的容器。
- 内部有一个 div 元素，其 id 为 container，该元素很可能是用来承载地图的容器，后续的地图会被渲染在这个 div 元素中。

二、脚本部分（<script>）

javascript

import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "LayerManage",
  data() {
    return {
      map: null,
      satelliteLayer: null,
      roadNetLayer: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "1e31659e58fa7666fe0d08f4487ec5c2",  // 记得替换为实际申请的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 构造官方卫星、路网图层
        this.satelliteLayer = new AMap.TileLayer.Satellite();
        // this.roadNetLayer = new AMap.TileLayer.RoadNet();
        // 批量添加图层
        this.map.add([this.satelliteLayer, this.roadNetLayer]);
      }).catch(e => {
        console.log(e);
      });
    },
    addSatelliteLayer() {
      this.map.add(this.satelliteLayer);
    },
    removeSatelliteLayer() {
      this.map.remove(this.satelliteLayer);
    },
    addRoadNetLayer() {
      this.map.add(this.roadNetLayer);
    },
    removeRoadNetLayer() {
      this.map.remove(this.roadNetLayer);
    }
  },
  mounted() {
    this.initMap();
  }
};

导入和组件声明：
- import AMapLoader from '@amap/amap-jsapi-loader';：从 @amap/amap-jsapi-loader 导入高德地图的 JavaScript API 加载器。
- export default {...}：定义一个 Vue 组件，组件名为 LayerManage。
数据部分（data）：
- map: null：存储地图对象，初始化为 null。
- satelliteLayer: null：存储卫星图层对象，初始化为 null。
- roadNetLayer: null：存储路网图层对象，初始化为 null。
方法部分（methods）：
- initMap()：
  - 使用 AMapLoader.load() 方法加载高德地图 API，传入 key 和 version 等配置信息。
  - 在加载成功后，使用 AMap.Map 创建一个地图对象，将其绑定到 id 为 container 的元素上，并设置 zoom 和 center 属性。
  - 使用 new AMap.TileLayer.Satellite() 创建一个卫星图层对象，并存储在 satelliteLayer 变量中。
  - 代码中注释掉了 this.roadNetLayer = new AMap.TileLayer.RoadNet();，如果取消注释，会创建一个路网图层对象。
  - 使用 this.map.add([this.satelliteLayer, this.roadNetLayer]); 尝试将创建的图层添加到地图中，但由于 roadNetLayer 可能未正确创建，会出现问题，需要确保 roadNetLayer 正确创建和初始化。
- addSatelliteLayer()：将卫星图层添加到地图中。
- removeSatelliteLayer()：从地图中移除卫星图层。
- addRoadNetLayer()：将路网图层添加到地图中。
- removeRoadNetLayer()：从地图中移除路网图层。
生命周期钩子（mounted）：
- 调用 initMap() 方法，在组件挂载后初始化地图和相关图层。

三、样式部分（<style>）

css

<style>
  html,
  body,
  #container {
    width: 100%;
    height: 125%;
  }
.page-container {
    width: 100%;
  }
.input-card {
    width: 24rem;
  }
.input-item {
    margin-bottom: 10px;
  }
.btn {
    padding: 5px 10px;
  }
</style>

通用样式：
- html, body, #container：设置它们的宽度为 100%，#container 的高度为 125%，用于确保容器元素和页面的布局。
- .page-container：设置类名为 page-container 的元素的宽度为 100%。
- .input-card：设置宽度为 24rem，可能用于一些输入框元素的样式。
- .input-item：设置下边距为 10px，可能用于输入项的布局。
- .btn：设置按钮元素的内边距，可能用于样式调整。

可能的问题及优化建议：

在 initMap() 方法中，roadNetLayer 未正确创建，因为相关代码被注释掉了。如果需要使用路网图层，需要取消注释 this.roadNetLayer = new AMap.TileLayer.RoadNet(); 并确保正确导入相关模块。
在 initMap() 方法的 this.map.add([this.satelliteLayer, this.roadNetLayer]); 部分，需要确保 roadNetLayer 不为 null，否则可能导致添加失败。可以在添加图层之前添加一些条件判断，例如：

javascript

if (this.satelliteLayer) {
  this.map.add(this.satelliteLayer);
}
if (this.roadNetLayer) {
  this.map.add(this.roadNetLayer);
}

这个 Vue 组件主要实现了高德地图的加载以及卫星图层和路网图层的管理，通过方法可以实现添加和移除这些图层的操作，同时使用 Vue 的生命周期钩子和样式来管理组件的状态和显示效果。在使用时需要确保高德地图 API 的 key 是有效的，并根据需求合理添加和移除图层。

完整代码：

<template>
  <div class="page-container">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "LayerManage",
  data() {
    return {
      map: null,
      satelliteLayer: null,
      roadNetLayer: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "1e31659e58fa7666fe0d08f4487ec5c2",  // 记得替换为实际申请的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 构造官方卫星、路网图层
        this.satelliteLayer = new AMap.TileLayer.Satellite();
        // this.roadNetLayer = new AMap.TileLayer.RoadNet();
        // 批量添加图层
        this.map.add([this.satelliteLayer, this.roadNetLayer]);
      }).catch(e => {
        console.log(e);
      });
    },
    addSatelliteLayer() {
      this.map.add(this.satelliteLayer);
    },
    removeSatelliteLayer() {
      this.map.remove(this.satelliteLayer);
    },
    addRoadNetLayer() {
      this.map.add(this.roadNetLayer);
    },
    removeRoadNetLayer() {
      this.map.remove(this.roadNetLayer);
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style>
  html,
  body,
  #container {
    width: 100%;
    height: 125%;
  }
 .page-container {
    width: 100%;
  }
 .input-card {
    width: 24rem;
  }
 .input-item {
    margin-bottom: 10px;
  }
 .btn {
    padding: 5px 10px;
  }
</style>

截图效果：

总结

到此这篇关于如何利用vue+高德API搭建前端环境页面的文章就介绍到这了,更多相关vue+高德API搭建前端环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。本文通过实例图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-11-11
解决vue页面刷新或者后退参数丢失的问题
下面小编就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue-cli脚手架引入弹出层layer插件的几种方法
layer.js(mobile)是一个小巧方便的弹出层插件，在之前的apicloud项目中被大量使用，但最近对apicloud的IDE、非常不友好的文档和极低的开发效率深感厌烦，决定弃用然后转向Vue开发。这篇文章主要介绍了vue-cli脚手架引入弹出层layer插件的几种方法，需要的朋友可以参考下
2019-06-06
详解vue-cli + webpack 多页面实例应用
本篇文章主要介绍了详解vue-cli + webpack 多页面实例应用，具有一定的参考价值，有兴趣的可以了解一下
2017-04-04
vue3+ts实际开发中该如何优雅书写vue3语法
近尝试上手 Vue3+TS+Vite,所以下面这篇文章主要给大家介绍了关于vue3+ts实际开发中该如何优雅书写vue3语法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
Vue服务端渲染实践之Web应用首屏耗时最优化方案
这篇文章主要介绍了Vue服务端渲染实践之Web应用首屏耗时最优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
详解vue beforeEach 死循环问题解决方法
这篇文章主要介绍了vue beforeEach 死循环问题解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue之bus总线的简单使用解读
这篇文章主要介绍了vue之bus总线的简单使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
浅谈vue项目重构技术要点和总结
这篇文章主要介绍了浅谈vue项目重构技术要点和总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue实现自动检测以及版本的更新
当用户在当前站点停留时间比较长，中途站点进行升级更新之后，用户如果不刷新页面就任然停留在旧的页面里，如何让用户收到一个提示，引导用户进行更新操作呢？下面给大家介绍如何站点更新如何在生产环境提示用户更新，进行页面刷新操作，核心原理其实很简单
2023-03-03