二、高德地图的控件及控件位置布局

目录

地图控件说明文档:

使用方法名

第一步:在loader的plugins中进行引入

第二步:在then中使用addControl函数进行定义

 结果展示:

第三步:发现问题:地图控件有重叠现象

解决问题:在地图控件中添加定位和偏移量

效果展示:完美解决

---

地图控件说明文档:

https://lbs.amap.com/api/jsapi-v2/guide/overlays/toolbar

使用方法名

map.addControl()

第一步:在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)
        })
    }
  },

第二步:在then中使用addControl函数进行定义

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

完整代码:

<template>
  <div id=&