小程序map（地图）组件

Posted 2022-12-12 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
    )
  
)

效果图