小程序地图组件的使用

Posted 2021-02-28 jlfw

map组件使用

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

需求

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

---

解决？

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

具体实现

起始页wxml

    <view class="company-adress">
        <view class="weui-loadmore weui-loadmore_line">
            <view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司地址</view>
        </view>
        <block wx:for="{{place}}" wx:key=‘index‘>
            <view class="weui-media-box weui-media-box_text" bindtap="openMap" data-index="{{index}}">
                <image class="pos-icon" src="../../youzan-image/pos.png"></image>
                <view class="weui-media-box__title weui-media-box__title_in-text">{{item.shortAddress}}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                <view class="weui-media-box__desc">{{item.detailAddress}}</view>
            </view>
        </block>
    </view>

起始页事件js

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

跳转地图页wxml

<view class="container">
    <map class="Map" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" controls="{{controls}}" show-location  markers="{{markers}}" bindcontroltap="backToMyposition">
        <cover-view class="footer">
            <cover-view class="detail">{{shortAddress}}{{detailAddress}}</cover-view>
        </cover-view>
    </map>   
</view>

跳转地图页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,
        })
      }
    })
  }
})