• 小程序开发-Map地图组件


    Map组件

    本文主要展示地图组件的几个能力:

    • 经纬度转预览图
    • 经纬度转大图
    • 地理位置转经纬度
    • 预览图缩放

    最终效果:

    wsml代码如下:

    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          id="myMap"
          style=" 100%; height: 300px;"
          latitude="{{latitude}}"
          longitude="{{longitude}}"
          markers="{{markers}}"
          covers="{{covers}}"
          show-location
        ></map>
      </view>
    
      <view class="btn-area">
        <button bindtap="chooseLocation" class="page-body-button" type="primary">选择位置</button>
        <button bindtap="openLocation" class="page-body-button" type="primary">打开位置</button>
        <button bindtap="getCenterLocation" class="page-body-button" type="primary">获取位置</button>
        <button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
        <button bindtap="translateMarker" class="page-body-button" type="primary">移动标注</button>
        <button bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>
      </view>
    </view> 
    

    部分代码如下:

    Page({
      data: {
        latitude: 23.099994,
        longitude: 113.324520,
        markers: [{
          id: 1,
          latitude: 23.099994,
          longitude: 113.324520,
          name: 'T.I.T 创意园'
        }],
        covers: [{
          latitude: 23.099994,
          longitude: 113.344520,
          iconPath: '/image/location.png'
        }, {
          latitude: 23.099994,
          longitude: 113.304520,
          iconPath: '/image/location.png'
        }]
      },
      onReady: function (e) {
        this.mapCtx = wx.createMapContext('myMap')
      },
      chooseLocation:function(){
        var that = this;
        wx.chooseLocation({
          success: function (res) {
            console.log(res, "location")
            console.log(res.name)
            console.log(res.latitude)
            console.log(res.longitude)
            that.setData({
              latitude: res.latitude,
              longitude: res.longitude
            })
          },
          fail: function () {
            // fail
          },
          complete: function () {
            // complete
          }
        })
      },
      openLocation:function(){
        var that = this;
        wx.openLocation({
          latitude: that.data.latitude,
          longitude: that.data.longitude,
          scale: 18
        })
      },
      getCenterLocation: function () {
        this.mapCtx.getCenterLocation({
          success: function(res){
            console.log(res.longitude)
            console.log(res.latitude)
          }
        })
      },
      moveToLocation: function () {
        this.mapCtx.moveToLocation()
      },
      translateMarker: function() {
        this.mapCtx.translateMarker({
          markerId: 1,
          autoRotate: true,
          duration: 1000,
          destination: {
            latitude:23.10229,
            longitude:113.3345211,
          },
          animationEnd() {
            console.log('animation end')
          }
        })
      },
      includePoints: function() {
        this.mapCtx.includePoints({
          padding: [10],
          points: [{
            latitude:23.10229,
            longitude:113.3345211,
          }, {
            latitude:23.00229,
            longitude:113.3345211,
          }]
        })
      }
    })
    
    
    .page-section-gap{
      box-sizing: border-box;
      padding: 0 30rpx;
    }
    .page-body-button {
      margin-bottom: 30rpx;
    }
    
  • 相关阅读:
    VLC通过RTSP地址向IPC取流播放不了问题排查
    linux opt分区扩容操作案例
    win10远程桌面报错"出现身份验证错误"
    linux通过expect实现脚本自动交互
    oracle通过触发器记录登陆主机ip
    linux root密码忘记重置
    linux双网卡配置
    Tomcat报错合集
    UFT(QTP)中的Object Repository
    利用JAVA反射机制设计通用的DAO
  • 原文地址:https://www.cnblogs.com/limaostudio/p/13617986.html
Copyright © 2020-2023  润新知