收藏
回答

map.includePoints 的padding无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug map 客户端 6.7.3 2.3.2


<!-- .wxml -->

<map id='myMap' longitude='{{longtitude}}' latitude='{{latitude}}' show-location scale='12' markers='{{markers}}' bindmarkertap='tapToShowCard' bindcallouttap='tapToShowDetail'></map>


<!-- .js -->

var sourceMarker = [{

latitude: 24.508513,

longitude: 118.107597,

iconPath: '../../sources/marker.png',

width: 22,

height: 30,

callout: {

content: '查看详情',

fontSize: 16,

borderRadius: 5,

padding: 8,

display: 'ALWAYS'

}

},{

latitude: 24.508439,

longitude: 118.10778,

iconPath: '../../sources/marker.png',

width: 22,

height: 30,

callout: {

content: '查看详情',

fontSize: 16,

borderRadius: 5,

padding: 8,

display: 'ALWAYS'

}

},{

latitude: 24.5084,

longitude: 118.107168,

iconPath: '../../sources/marker.png',

width: 22,

height: 30,

callout: {

content: '查看详情',

fontSize: 16,

borderRadius: 5,

padding: 8,

display: 'ALWAYS'

}

}]


Page({


/**

  * 页面的初始数据

  */

data: {

latitude: 0,

longtitude: 0,

markers: sourceMarker,

points: sourcePoints

},


/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

var that = this;

wx.getLocation({

success: function(res) {

that.setData({

latitude: res.latitude,

longtitude: res.longitude

})

that.mapCtx = wx.createMapContext('myMap');

that.includePoints();

},

})

},


includePoints: function () {

this.mapCtx.includePoints({

padding: [20],

points: [{

latitude: 24.508513,

longitude: 118.107597,

}, {

latitude: 24.508439,

longitude: 118.10778,

}, {

latitude: 24.5084,

longitude: 118.107168,

}]

})

},


/**

  * 生命周期函数--监听页面初次渲染完成

  */

onReady: function () {


},


/**

  * 生命周期函数--监听页面显示

  */

onShow: function () {


},


/**

  * 生命周期函数--监听页面隐藏

  */

onHide: function () {


},


/**

  * 生命周期函数--监听页面卸载

  */

onUnload: function () {


},


/**

  * 页面相关事件处理函数--监听用户下拉动作

  */

onPullDownRefresh: function () {


},


/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function () {


},


/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {


}

})




回答关注问题邀请回答
收藏

7 个回答

  • 张孝峰
    张孝峰
    04-28

    微信解决了吗

    04-28
    有用
    回复
  • 🍋
    🍋
    2022-10-28

    2022年快过去了真机不生效问题还没解决

    2022-10-28
    有用
    回复
  • 騁風破浪
    騁風破浪
    2021-10-09

    2021年国庆节都过了,这问题还没解决。。。

    😅😅😅😅😅

    padding无效,includePoints回调里面设置scale也不行。

    2021-10-09
    有用
    回复
  • 匿名
    匿名
    2019-11-10

    padding到现在都没用,官方设置这么个参数有什么用?

    回来设置scale或地图updated完成再设置scale也没用

    Android不行,ios可以

    2019-11-10
    有用
    回复 1
    • 保持联系🌲
      保持联系🌲
      2022-09-29
      我的iPhoneX手机也是不行的啊; 你们怎么都说iPhone手机可以;好奇怪的了;
      2022-09-29
      回复
  • 🐳 吃番茄的少年
    🐳 吃番茄的少年
    2018-11-09

    我也碰到了这样的问题。  请问这个问题解决了吗?

    2018-11-09
    有用
    回复 5
  • 2018-11-05

    我希望地图在展示多个标记点的时候能够自动缩放视野以包含所有的点,最初我采用map的include-points属性来实现,发现工具上没有任何效果,真机上可以实现,但是其中有两个点处于地图可视范围的边缘,导致气泡有部分超出了屏幕,于是我尝试给map设置padding如下:

    map{
      padding: 50rpx;
    }

    但是不起作用,反而超出屏幕的范围更多了。后来我尝试用Api :map.includePoints实现,发现工具可以实现且展示均匀不超出屏幕,但真机还是和上一个方案的效果一样,会超出屏幕,padding设置后也是没有效果,反而超出屏幕的范围更多了。相关代码如下:

    wxml部分

    <map id='myMap' longitude='{{longtitude}}' latitude='{{latitude}}' show-location scale='12' markers='{{markers}}' include-points='{{points}}' bindmarkertap='tapToShowCard' bindcallouttap='tapToShowCard'>

    wxss部分

    page {
      height: 100%;
    }
     
    map {
      width: 100%;
      height: 100%;
    }

    js部分

    var sourceMarker = [{
      id: 0,
      latitude: 24.508513,
      longitude: 118.107597,
      iconPath: '../../sources/marker.png',
      width: 22,
      height: 30,
      callout: {
        content: '查看详情',
        fontSize: 16,
        borderRadius: 5,
        padding: 8,
        display: 'ALWAYS'
      }
    },{
      id: 1,
      latitude: 24.508439,
      longitude: 118.10778,
      iconPath: '../../sources/marker.png',
      width: 22,
      height: 30,
        callout: {
          content: '查看详情',
          fontSize: 16,
          borderRadius: 5,
          padding: 8,
          display: 'ALWAYS'
        }
    },{
      id: 2,
      latitude: 24.5084,
      longitude: 118.107168,
      iconPath: '../../sources/marker.png',
      width: 22,
      height: 30,
      callout: {
        content: '查看详情',
        fontSize: 16,
        borderRadius: 5,
        padding: 8,
        display: 'ALWAYS'
      }
    }]
    var sourcePoints = [{
      latitude: 24.508513,
      longitude: 118.107597,
    }, {
      latitude: 24.508439,
      longitude: 118.10778,
    }, {
      latitude: 24.5084,
      longitude: 118.107168,
    }]
     
    Page({
     
      /**
       * 页面的初始数据
       */
      data: {
        showCard: false,
        cardBottom: 0,
        latitude: 0,
        longtitude: 0,
        markers: sourceMarker,
        points: sourcePoints
      },
     
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
         
        wx.getLocation({
          success: function(res) {
            that.setData({
              latitude: res.latitude,
              longtitude: res.longitude
            })
            that.mapCtx = wx.createMapContext('myMap');
            that.includePoints();
          },
        })
      },
     
      includePoints: function () {
        this.mapCtx.includePoints({
          padding: [10],
          points: [{
            latitude: 24.508513,
            longitude: 118.107597,
          }, {
            latitude: 24.508439,
            longitude: 118.10778,
          }, {
            latitude: 24.5084,
            longitude: 118.107168,
          }]
        })
      }
      
    })


    2018-11-05
    有用
    回复 6
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-11-09

      麻烦按照要求来补全信息,按照教程来提供代码片段,另外回复信息请在我的评论下回复,不然无法收到回复

      2018-11-09
      回复
    • 2018-11-14回复疯狂的小辣椒

      你好,代码片段见此链接:https://developers.weixin.qq.com/s/yRBmZUm17G3U,问题描述我想我已经说的很清楚了。麻烦看一下

      2018-11-14
      回复
    • 不如守中
      不如守中
      2019-03-22

      请问楼主现在这个问题解决了吗?我也遇到了这个问题。。但是现在在网上好像搜不到类似的解决方案啊。。

      2019-03-22
      回复
    • ^O^
      ^O^
      2022-07-23
      加个定时器后,设置的padding四个值不同都是可以的
      2022-07-23
      回复
    • 保持联系🌲
      保持联系🌲
      2022-09-29
      好像在别的博客也看到你的这个描述的哈;我的iPhoneX手机也是不行的啊; 他们怎么都说iPhone手机可以;好奇怪的了;
      2022-09-29
      回复
    查看更多(1)
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-11-05

    你好,请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-11-05
    有用
    回复 3
    • Aleph
      Aleph
      2019-06-25

      同样出现这个问题,半年过去了,至今没修复

      2019-06-25
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-06-25回复Aleph

      使用楼主的代码片段在真机是有效果的哦,可以将微信版本升级至7.0.4看下

      2019-06-25
      回复
    • crazy
      crazy
      2020-08-17回复疯狂的小辣椒
      map组件放在一个自定义的组件中,调用这个this.mapCtx.includePoints无效
      2020-08-17
      回复
登录 后发表内容