记录 vue-amap 自定义图标实现来回切换卫星图项目场景：问题描述原因分析：解决方案(想了半个小时)：

74 阅读 0 评论 49 点赞

我是靠谱客的博主欢呼仙人掌，最近开发中收集的这篇文章主要介绍记录 vue-amap 自定义图标实现来回切换卫星图项目场景：问题描述原因分析：解决方案(想了半个小时)：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

项目场景：

今天有个小需求，就是不想使用高德地图自带的卫星图的图标，因为有点丑。使用自己定义的图标来实现卫星图的来回切换如图是高德地图原生的卫星图：
在这里插入图片描述
本以为是很简单的需求，没想到花费了两个多小时，归根到底还是对高德地图的api 没有掌握通透。
先看效果图：
这是没有选中卫星图标的图

这是选中卫星图标的图
在这里插入图片描述

问题描述

在高德地图中，要知道图层的概念，卫星图是一个图层，你常规的地图也是一个图层，
之前找了一篇文章，记录了怎么变成卫星图：（链接）
https://blog.csdn.net/m0_37755267/article/details/119572237
发现试了以后，只能变成卫星图，无法来回变回来，虽然我也问了，但也没答复。
在这里插入图片描述
其实按照他的逻辑也是对的，毕竟vue-amap 是基于高德地图封装的，只要改变这个plugin 应该就可以实现的，但不知道为啥我这边实现不了，不知道各位小伙伴试了以后，能否成功，要是成功了，记得告诉我一声。

原因分析：

这里我也分析不出来什么问题，于是只能去看高德地图的api，发现高德的这个api 对我很有帮助
链接：https://lbs.amap.com/demo/javascript-api/example/layer-common/layer-add-rm

解决方案(想了半个小时)：

事情到这边，本以为会很快解决的，那只要调用他的api 里的方法，然后cv 一下就可以了，可没想到，也是遇到一样的问题，能变成卫星图，但变不回来，还报 satellite.hide is not a function 来看看我之前的代码：

 gotoWx() {
      this.isWx = !this.isWx
      if (this.isWx) {
        // 添加图层并展示图层
        var satellite = new AMap.TileLayer.Satellite({
          map: this.$refs.amap.$$getInstance()
        })
        satellite.show()
      } else {
        satellite.hide()
      }
    },

在这里插入图片描述
这是我不理解的，明明已经定义了，大概原因，可能是变量的作用域的关系吧，于是乎，我把var satellite 定义在了最外层

这样就可以了，感觉就是作用域的问题, 但我后面有发现一个问题，每次我点击的时候，都会创建一个卫星图层，这样感觉会影响性能，于是我打算在初始化的时候，创建一个图层，之后的点击，也就对它一个图层进行隐藏和显示，于是代码改成了这样：
在这里插入图片描述
点击的时候，就只做图层的隐藏和展示：

最后问题解决了，还是需要对api 多深入，因为我后面发现他的api 就是采用这种方式的。