小程序map（地图）组件

逃离我推掉我的手 2022-10-07 10:49 3阅读 0赞

## 文档 ##

*  [https://developers.weixin.qq.com/miniprogram/dev/component/map.html][https_developers.weixin.qq.com_miniprogram_dev_component_map.html]

## 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
        })
      }
    })

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[https_developers.weixin.qq.com_miniprogram_dev_component_map.html]: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221005/b1acdc2fe6bd4bc48f00ecec334e51f5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序地图组件无限闪烁导致小程序崩溃

在做一个通过腾讯地图api查询关键词搜索附近标记的小程序时遇到了这个问题 ![map监听事件][map] 在这个事件触发时，会一直重复触发，你不动时地图他还是一直在触发

红太狼/ 2023年06月19日 11:06/ 0 赞/ 17 阅读

相关 37.微信小程序（组件--地图+画布）

微信小程序（组件–地图+画布）本节主要介绍下地图组件map及画布组件canvas。因为组件属性过多，很多方法尚未完善，所以主要讲解下常用属性及方法，后期开发如遇

水深无声/ 2022年11月25日 00:35/ 0 赞/ 281 阅读

相关小程序map（地图）组件

文档 [https://developers.weixin.qq.com/miniprogram/dev/component/map.html][https_dev

逃离我推掉我的手/ 2022年10月07日 10:49/ 0 赞/ 4 阅读

相关小程序地图定位

https://blog.csdn.net/weixin\_42120669/article/details/80897374 上面这个链接可以获

男娘i/ 2022年05月22日 05:07/ 0 赞/ 146 阅读

相关小程序地图定位

//index.js //获取应用实例这个是完好的 const app = getApp() Page ( \{ data: \{ latitude:

心已赠人/ 2022年05月22日 05:07/ 0 赞/ 252 阅读

相关微信小程序中Map地图组件的使用

常用功能一：绘制地图标记点一个或多个 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

我就是我/ 2022年02月04日 04:19/ 0 赞/ 1000 阅读

相关小程序：导航navigation与地图map组件总结

导航与地图组件的应用场景：在小程序需要由当前页面跳转到指定的页面时，就可以使用导航navigation组件，只需要设置指定页面的url地址即可。当需要实现定位、查找位置等一

逃离我推掉我的手/ 2022年01月22日 02:03/ 0 赞/ 430 阅读

相关微信小程序地图组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 地图（v2.7.0 起支持[同层渲染][Link 1]，相关api [wx.createMapC

﹏ヽ暗。殇╰゛Y/ 2021年09月08日 07:14/ 0 赞/ 1026 阅读

相关微信小程序map自定义组件实现

效果实际手机效果不会点击时突然闪一下，气泡弹窗也不会被其他坐标点挡住 ![20201016111009154.gif][]![202010161114474

骑猪看日落/ 2021年09月02日 03:13/ 0 赞/ 1306 阅读

相关微信小程序地图组件

index.wxml <map id="map" markers="{ {markers}}" longitude="{ {longitu

女爷i/ 2021年07月25日 01:34/ 0 赞/ 686 阅读