收藏
回答

map.includePoints 的padding无效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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 () {


}

})




最后一次编辑于  2018-11-03
回答关注问题邀请回答
收藏

4 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2018-11-05

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

    2018-11-05
    赞同
    回复 2
    • Aleph
      Aleph
      06-25

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

      06-25
      回复
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      06-25回复Aleph

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

      06-25
      回复
  • 高翔
    高翔
    11-10

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

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

    Android不行,ios可以

    11-10
    赞同
    回复
  • 🐳 吃番茄的少年
    🐳 吃番茄的少年
    2018-11-09

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

    2018-11-09
    赞同
    回复 4
    • 玉立
      玉立
      2018-11-14

      还没有

      2018-11-14
      回复
    • 🐳 吃番茄的少年
      🐳 吃番茄的少年
      2018-11-14

      我重新新建一个帖子吧

      2018-11-14
      回复
    • ℡ OnLy
      ℡ OnLy
      07-29
      请问这个问题解决了吗
      07-29
      回复
    • 🐳 吃番茄的少年
      🐳 吃番茄的少年
      08-06回复℡ OnLy
      没有,用了替代方案
      08-06
      回复
  • 玉立
    玉立
    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
    赞同
    回复 3
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      2018-11-09

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

      2018-11-09
      回复
    • 玉立
      玉立
      2018-11-14回复社区技术运营专员-娇华

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

      2018-11-14
      回复
    • 🧸
      🧸
      03-22

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

      03-22
      回复