GitLab

目标

问题

1. map是原生组件，设计稿的标记点是自定义组件，涉及到层级问题

解决方案：自定义组件引入cover-view，来解决原生组件层级比view组件高的问题

2. 标记点在屏幕中居中

思路： 这里涉及到两个经纬度，一个是展示区域的中心点，一个是标记位的中心点，如果要让标记位居中的话，那么展示区域要偏上点。

解决方案：调整展示区域的维度，调试最合适的位置。目前找到是加0.0008比较合适

    mapLatitude() {
      return this.detail.latitude ? (+this.detail.latitude + 0.0008) : ''; 
    },

3. 机型部分机型信息显示不全

插槽外层要定义宽度

内部长度不能超过插槽定义的总宽度

插槽渲染前要判断值是否有值，偶发性的发现如果map渲染快于数据请求的话，也会出现这类问题

标记点的参数要申明position，但不能定义宽高的值

demo:

<!-- 地图 -->
<script>
import wepy from '@wepy/core';

wepy.component({

  options: {
    multipleSlots: false // 在组件定义时的选项中启用多slot支持
  },

  props: {
    /**
     * 传入参数，对象内部的值
     * detail： {name, address, latitude, longitude }
     */
    detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },

  data: {
    customCalloutMarkerIds: [1]
  },
  computed: {
    mapLatitude() {
      return this.detail.latitude ? (+this.detail.latitude + 0.0008) : '';
    },
    latitude() {
      return +this.detail.latitude;
    },
    longitude() {
      return +this.detail.longitude;
    },
    markers() {
      if (this.latitude && this.longitude) {
        return [{
          id: 1,
          latitude: this.latitude,
          longitude: this.longitude,
          position: {// 控件在地图的位置 加了这个个别手机显示不出内容
            // width: 250,
            // height: 52
          },
          customCallout: {
            anchorY: 0,
            anchorX: 0,
            display: 'ALWAYS'
          }
        }];
      }
      return [];
    }
  },

  methods: {
    handleMapTap() {
      const { name, address, latitude, longitude } = this.detail;
      wx.$LHBbigData.send({
        event_id: 'a8153651-1ed0-4137-820f-b5d661341468' // 事件id
      });
      wx.openLocation({
        latitude: +latitude,
        longitude: +longitude,
        name,
        address,
        scale: 18,
        success: () => {},
        fail: (e) => {
          console.log(e);
        }
      });
    }
  },

  watch: {}

});

</script>

<template lang='wxml'>
<map
  class="map"
  latitude="{{mapLatitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  :enable-scroll="false"
  :show-location="true"
  :enable-zoom="false"
  bindtap="handleMapTap"
  bindmarkertap="handleMapTap"
  bindcontroltap="handleMapTap"
  bindanchorpointtap="handleMapTap"
  bindcallouttap="handleMapTap"
>
  <cover-view slot="callout" class="map-cover-container" v-if="detail && detail.name">
    <cover-view marker-id="1" class="map-container">
      <cover-view class="map-container__title">{{detail.name}}</cover-view>
      <cover-view class="map-container__address">{{detail.address}}</cover-view>
    </cover-view>
  </cover-view>
</map>
</template>

<style lang="less" scoped>
@import '~style/mixin';
.map {
  background: #0F0F0F;
  border-radius: 10rpx;
  border: 1rpx solid #979797;
  width: 100%; 
  min-height: 298rpx;
  border-radius: 12rpx;
  .map-cover-container {
    min-width: 260rpx;
    max-width: 520rpx;
    min-height: 77rpx;
  }
  &-container {
    background: #FFFFFF;
    padding: 20rpx;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.2);
    border-radius: 4rpx;
    &__title {
      font-size: 24rpx;
      font-weight: 500;
      color: #222222;
      line-height: 32rpx;
      max-width: 520rpx;
      margin-bottom: 4rpx
    }
    &__address {
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
      max-width: 520rpx;
      line-height: 32rpx;
    }
  }
}
</style>