微信小程序—地图组件map-功能扩展

博客概要

     承接上一篇博文，对微信小程序里的map地图组件做一个功能上拓展的简单分享，拓展功能有指南针显示与否、旋转开启与否、缩放开启与否、拖动开启与否以及卫星图开启与否~

组件map

1.运行结果

2.代码示例

     没给样式代码噢，自_己敲~希望读者务必别太懒哈= =

<!-- wxml -->
<map id="map" 
  latitude="{{latitude}}" 
  longitude="{{longitude}}"
  show-compass="{{showCompass}}"
  enable-rotate="{{enableRotate}}"
  enable-zoom="{{enableZoom}}"
  enable-scroll="{{enableScroll}}"
  enable-satellite="{{enableSatellite}}"
  scale="13"  
  show-location
>
  <cover-view>
    <cover-view>
      经度：{{longitude}}
    </cover-view>
    <cover-view>
      纬度：{{latitude}}
    </cover-view>
  </cover-view>

  <cover-view class="btn">
    <cover-view bindtap="toggleShowCompass">
      {{ !showCompass ? '显示' : '关闭' }}指南针
    </cover-view>
    <cover-view bindtap="toggleRotate">
      {{ !enableRotate ? '开启' : '关闭' }}旋转
    </cover-view>
    <cover-view bindtap="toggleZoom">
      {{ !enableZoom ? '开启' : '关闭' }}缩放
    </cover-view>
    <cover-view bindtap="toggleScroll">
      {{ !enableScroll ? '开启' : '关闭' }}拖动
    </cover-view>
    <cover-view bindtap="toggleSatellite">
      {{ !enableSatellite ? '开启' : '关闭' }}卫星图
    </cover-view>
  </cover-view>
</map>

// js
Page({
  data: {
    showCompass: false,
    enableZoom: true,
    enableScroll: true,
    enableRotate: false,
    enableSatellite: false,
  },
  toggleShowCompass() {
    this.setData({
      showCompass: !this.data.showCompass
    })
  },
  toggleZoom() {
    this.setData({
      enableZoom: !this.data.enableZoom
    })
  },
  toggleScroll() {
    this.setData({
      enableScroll: !this.data.enableScroll
    })
  },
  toggleRotate() {
    this.setData({
      enableRotate: !this.data.enableRotate
    })
  },
  toggleSatellite() {
    this.setData({
      enableSatellite: !this.data.enableSatellite
    })
  },

3.元素说明

map组件属性

属性	说明
show-compass	显示指南针
enable-rotate	是否支持旋转
enable-zoom	是否支持缩放
enable-scroll	是否支持拖动
enable-satellite	是否开启卫星图
…	…

• 更多内容点击跳转至官方文档：组件-地图-map

cover-view

组件介绍

1. 覆盖在原生组件上的文本视图
2. 可覆盖的原生组件：map、video、camera、canvas、live-player、live-pusher
3. 只支持嵌套cover-view、cover-image
4. 可在cover-view中使用button
5. 组件属性默认长度单位为px

有坑提示：
     针对上面列出来的第四条，博主当时也没多想，直接就用了，但是通过在真机上的编译预览时，博主发现有那么点不对劲，出现了问题

（1）介绍：
     可在cover-view中使用button

（2）代码示例

  <cover-view>
    <button bindtap="toggleSatellite">
      {{ !enableSatellite ? '开启' : '关闭' }}卫星图
    </button>
  </cover-view>

（3）目标效果：
     点击button可显示切换文字，并具备对应地图的实际效果

（4）BUG：
     button实现了相应的地图切换效果，但按钮上显示的文字并没有切换= =怎么点击都是默认不变…可把我愁的呀…

（5）解决：
     好学的博主“抱了大腿”，在和两位大佬讨论之后，完美解决了BUG，解决方法是将button标签换成cover-view标签，在通过样式的进一步设置，模拟成button按钮的样式

（6）运行结果：

（7）BUG原因：
     根据开发者文档里面的Bug&Tip介绍，cover-view和cover-image的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击

更多内容点击跳转至官方文档：组件-视图容器-cover-view

---

总结

     更多细节请务必按照给的链接前去查阅官方文档进一步的学习，本文内容只给出了可以直接实现功能的代码，里面涉及的语法、标签等需要读者自己花点时间去理解，仅供参考噢~（犯懒病ing= =）