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

博客概要

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

文章目录

- 博客概要
- 组件map
- - 1.运行结果
  - 2.代码示例
  - 3.元素说明
  - 总结

组件map

1.运行结果

2.代码示例

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

html" title=javascript>javascript"><!-- 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>

html" title=javascript>javascript">// 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

组件介绍

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

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

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

（2）代码示例

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