如何利用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中使用jwt-decode解析token的方法
这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-06-06
vue 点击删除常用方式小结
这篇文章主要介绍了vue 点击删除常用方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue中监视属性和计算属性区别解析
这篇文章主要介绍了Vue中监视属性和计算属性区别,通过本文学习大家知道computed与watch配置项问题，computed能完成的功能，watch都可以完成，本文通过实例代码给大家详细讲解，需要的朋友可以参考下
2022-10-10
vue如何跳转到其他页面
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
vue3利用store实现记录滚动位置的示例
这篇文章主要介绍了vue3利用store实现记录滚动位置的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
基于vue框架手写一个notify插件实现通知功能的方法
这篇文章主要介绍了基于vue框架手写一个notify插件实现通知功能的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Vue 刷新当前路由的实现代码
这篇文章主要介绍了Vue 刷新当前路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue项目使用高德地图时报错:AMap is not defined解决办法
这篇文章主要给大家介绍了关于vue项目使用高德地图时报错:AMap is not defined的解决办法,"AMap is not defined"是一个错误提示,意思是在代码中没有找到定义的AMap,需要的朋友可以参考下
2023-12-12
Vue中使用计算属性的知识点总结
在本篇文章里小编给大家整理了一篇关于Vue中使用计算属性的知识点总结内容，对此有兴趣的朋友们可以跟着学习参考下。
2021-12-12
关于Vue的URL转跳与参数传递方式
这篇文章主要介绍了关于Vue的URL转跳与参数传递方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03