• 小程序开发-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;
    }
    
  • 相关阅读:
    Android Preference 实现长按监听 longclickable
    表达式求值
    二分图大讲堂——彻底搞定最大匹配数(最小覆盖数)、最大独立数、最小路径覆盖、带权最优匹配
    poj 1806
    树的公共祖先问题LCA
    给定两个长度相同,分别有序的数组A和B,求两个数组中所有数的中位数
    网络爬虫基本原理(转载)
    atoi函数的实现
    一个天平,12个大小,外观相同的球,一个球的重量与其他的不同,称3次找出问题小球
    动态规划求RMQ(区间最值问题Range Minimum/Maximum Query)
  • 原文地址:https://www.cnblogs.com/limaostudio/p/13617986.html
Copyright © 2020-2023  润新知