小程序地图组件的使用

map组件使用

这里是官方文档,一定要看

需求

  • 点击不同的地方,跳转到地图上该地方的位置
  • 在目标位置上有显示目标位置的小图标
  • 右下角有个回到当前位置的控件,点击后返回到当前位置
  • 将文本输入到地图页面底部


解决?

  1. 在外部父级view上绑定索引index,通过e.currentTarget.dataset.index获取到当前点击的地方,然后通过url传递index过去,map组件通过onLoad接收点击的index,再通过id查询数据,并动态赋值;
  2. 给markers标记点传递经纬度;
  3. controls控件 bindcontroltap事件
  4. 地图优先级最高,只能使用cover-view显示文本

具体实现

起始页wxml

    
        
            公司地址
        
        
            
                
                {{item.shortAddress}}
                
                {{item.detailAddress}}
            
        
    

起始页事件js

 openMap:function (e) {
    let index = e.currentTarget.dataset.index;
    wx.navigateTo({
      url: `/pages/map/map?id=${index}`,
    }) 
  },

跳转地图页wxml


    
        
            {{shortAddress}}{{detailAddress}}
        
       

跳转地图页wxss

.container {
    width: 100%;
    height: 100vh;
}

.Map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 200rpx;
    background-color: #fff;
}

.detail {
    display: block;
    width: 100%;
    float: left;
    padding-left: 15rpx;
    padding-top: 20rpx;
    bottom: 30rpx;
    word-wrap: break-word;
    font-size: 17px;
    color: #020202;
}

跳转地图页js

import address from '../../api/address'
const app = getApp()
Page({
  data: {
    latitude: '',
    longitude:'',
    shortAddress:'',
    detailAddress:'',
    scale: 18,
    controls: [],
    markers:[],
  },
  onLoad: function (options) {
    const id = options.id;
    this.setData({
      latitude:address[id].latitude,
      longitude:address[id].longitude,
      shortAddress: address[id].shortAddress,
      detailAddress: address[id].detailAddress,
      controls: [{
        id: 0,
        iconPath: '../../youzan-image/back.png',
        position: {
          left:330,
          top:450,
          width:30,
          height:30,
        },
        clickable: true
      }],
      markers:[{
        iconPath: '../../youzan-image/position.png',
        id: 0,
        latitude: address[id].latitude,
        longitude: address[id].longitude,
        width: 20,
        height: 20
      }]
    })
  },
  backToMyposition(e){
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res.latitude, res.longitude);
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 18,
        })
      }
    })
  }
})

你可能感兴趣的