小程序map（地图）组件

Posted 2021-06-28 yw00yw

文档

• https://developers.weixin.qq.com/miniprogram/dev/component/map.html

wxml

<!--index.wxml-->
<view class="map-container">
  <map
    id="map"
    class="map"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    scale="{{scale}}"
    markers="{{markers}}"
    polyline="{{polyline}}"
    circles="{{circles}}"
    controls="{{controls}}"
    show-location="{{true}}"
    enable-overlooking="{{true}}"
    show-compass="{{true}}"
    enable-rotate="{{true}}"
    enable-traffic="{{true}}"
    enable-building="{{true}}"
    >
    <!-- 控制层 -->
    <view class="controls-btn">
      <view class="btn">+</view>
      <view class="btn">-</view>
    </view>
    </map>
</view>

wxss

/**index.wxss**/
.map {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.controls-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
.btn {
  padding: 10rpx;
  font-size: 40rpx;
}

js

const app = getApp()

Page({
  data: {
    longitude: 108.971553,
    latitude: 34.35888,
    longitude1: 108.977103,
    latitude1: 34.35948,
    markers: [], // 标记点
    scale: 16, // 缩放级别
    polyline: [], // 路线
    circles: [], // 圆，范围
    controls: [], // 控制层
    includePoints: [], // 缩放视野展示所有经纬度
  },
  onLoad() {
    const mapCtx = wx.createMapContext("map", this);
    console.log(mapCtx);
    const { latitude, longitude, latitude1, longitude1 } = this.data;
    // 标记点
    const markers = [{
      id: "1",
      latitude,
      longitude,
      width: 30,
      height: 30,
      joinCluster: true,
      // iconPath: "/assests/imgs/my.png",
      iconPath: 'https://img-crs.vchangyi.com//standard/order-map-user.png',
      rotate: 15,
      alpha: 0.5,
      label: {
        content: '标记点',
        color: '#f00',
        fontSize: 12,
        borderRadius: 2,
        padding: 4,
        bgColor: 'transparent'
      },
      // title: "地图标记点",
      callout: {
        content: '取货点',
        color: '#666',
        fontSize: 12,
        borderRadius: 6,
        padding: 8,
        display: "ALWAYS"
      }
    },
    {
      id: "1",
      latitude: latitude1,
      longitude: longitude1,
      width: 30,
      height: 30,
      joinCluster: true,
      // iconPath: "/assests/imgs/my.png",
      iconPath: 'https://img-crs.vchangyi.com/standard/order-driver-icon-1.png',
      rotate: 15,
      alpha: 0.5,
      // title: "地图标记点",
      callout: {
        content: '骑手',
        color: '#666',
        fontSize: 12,
        borderRadius: 6,
        padding: 8,
        display: "ALWAYS"
      }
    }];
    // 路线
    const polyline = [{
      points: [{ latitude, longitude }, { latitude: latitude1, longitude: longitude1 }],
      colorList: ['#f00'],
      width: 1,
      dottedLine: false,
      arrowLine: false,
      level: "abovelabels"
    }];
    // 圆，范围
    const circles = [{
      latitude,
      longitude,
      color: '#fff',
      fillColor: '#7cb5ec88',
      radius: 100,
      strokeWidth: 1,
      level: 'abovelabels'
    }];
    // 控制层
    const controls = [{
      id: 11,
      iconPath: 'https://img-crs.vchangyi.com//standard/order-map-user.png',
      position: {
        left: 120,
        top: 50,
        width: 50,
        height: 50
      },
      clickable: true
    }];
    // 缩放视野展示所有经纬度，确保显示所有点
    mapCtx.includePoints({
      points: [{ latitude, longitude }, { latitude: latitude1, longitude: longitude1 }],
      padding: [100, 100, 100, 100],
      success: function (e) {
        console.log(e)
      }
    });
    this.setData({
      markers,
      polyline,
      circles,
      controls
    })
  }
})

效果图