收藏
回答

小程序地图多个标记点怎样能全部显示在视野内?

图1:我想要的效果

图2:开发工具测试效果【正常】

图3:手机端预览效果【不正常】

问题描述:小程序端进入地图一瞬间显示正常,随即就自动放大了。导致3个点位无法显示在视野内。

代码:wxml部分

<view>
<map id="myMap" latitude="{{latitude}}" 
  style="width:100%; height: 400px;"
  longitude="{{longitude}}" 
  markers="{{markers}}" 
  bindmarkertap="selectMarket"
  include-points="{{markers}}"
  subkey="XXX"
  enable-satellite
  scale="{{scale}}"
  rotate="90"
  >map>
view>

代码:js部分

var app = getApp();
Page({
  data: {
    latitude34.197742,  // latitude 纬度
    longitude108.883811// longitude 经度
    scale12,
    markers:
    [
  {
    id0,
    latitude34.197742,
    longitude108.883811,
    name'站点1',
    iconPath'../../images/location.png',
    callout: {
      content"继保室  地址:xxx",
      padding10,
      display'BYCLICK',
      textAlign'center',
      borderRadius3,
      borderWidth1,
      fontSize:12,
    }
  },
  {
    id1,
    latitude34.193183,
    longitude108.885395,
    name'站点2',
    callout: {
      content"继变电 地址:xxx",
      padding10,
      display'BYCLICK',
      textAlign'center',
      borderRadius3,
      borderWidth1,
      fontSize:12,
    }
  },
  {
    id2,
    latitude34.192931,
    longitude108.877964,
    name'站点3',
    callout: {
      content"站点a  地址:xxx",
      padding10,
      display'BYCLICK',
      textAlign'center',
      borderRadius3,
      borderWidth1,
      fontSize:12,
    }
  },
]
  },
  selectMarketfunction (e{
    console.log(e)
    var id = e.markerId
    console.log(id)
    wx.openLocation({
      latitudethis.data.markers[id].latitude,
      longitudethis.data.markers[id].longitude,
      namethis.data.markers[id].name,
    })
  },
  onLoadfunction (options{
   
  },
});

我想实现的效果,不管增加多少标记点,始终会显示在视野内。


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

2 个回答

  • 亦余心之所善兮
    亦余心之所善兮
    2021-01-07
    that.mapCtx = wx.createMapContext('mapDom'); //创建初始地图
    let includePointsData = []
    for (let i = 0; i < locationsData.length; i++) {
      includePointsData.push({
        latitude: locationsData[i].lat,
        longitude:locationsData[i].lng
      })
    }
    // 显示所有标记点
    that.mapCtx.includePoints({
      padding: [100, 80, 100, 80],
      points: includePointsData //放入所有坐标轴的数组   并引用此方法
    })
    
    2021-01-07
    有用
    回复
  • A北京二锅头
    A北京二锅头
    2020-08-06

    谢邀

    2020-08-06
    有用
    回复
登录 后发表内容
问题标签