前言

本次文章仅围绕地图组件展开

地图控件说明

控件使用

了解关键使用方法名

map.addControl()

没错就是这个addControl()用于在地图中添加组件 知道这个之后我们直接开始

1.在loader的plugins中进行引入

进入MapContainer.vue中找到我们的initMap函数的plugins，添加一个AMap.Scale比例尺控件

methods: {
          
   
    initMap() {
          
   
      AMapLoader.load({
          
   
        key: 2c1c4affeb410923990fec54c5af721a, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: 2.0, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [AMap.Scale] // 需要使用的的插件列表，如比例尺AMap.Scale等
      })
        .then(AMap => {
          
   
          this.map = new AMap.Map(container, {
          
   
            //设置地图容器id
            viewMode: 3D, //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [121.473667, 31.230525] //初始化地图中心点位置
          })
        })
        .catch(e => {
          
   
          console.log(e)
        })
    }
  },

2.在then中使用addControl函数进行定义

this.map.addControl(new AMap.Scale())

完整代码

<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from @amap/amap-jsapi-loader
export default {
          
   
  data() {
          
   
    return {
          
   
      map: null
    }
  },
  methods: {
          
   
    initMap() {
          
   
      AMapLoader.load({
          
   
        key: 2c1c4affeb410923990fec54c5af721a, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: 2.0, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [AMap.ToolBar, AMap.Scale, AMap.HawkEye, AMap.MapType, AMap.Geolocation] // 需要使用的的插件列表，如比例尺AMap.Scale等
      })
        .then(AMap => {
          
   
          this.map = new AMap.Map(container, {
          
   
            //设置地图容器id
            viewMode: 3D, //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [121.473667, 31.230525] //初始化地图中心点位置
          })
          this.map.addControl(new AMap.Scale())
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.HawkEye())
          this.map.addControl(new AMap.MapType())
          this.map.addControl(new AMap.Geolocation())
        })
        .catch(e => {
          
   
          console.log(e)
        })
    }
  },
  mounted() {
          
   
    //DOM初始化完成进行地图初始化
    this.initMap()
  }
}
</script>

<style lang="less">
#container {
          
   
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>

结果展示