收藏
回答

movable-view大小大于movable-area的情况下下,定位问题?

当movable-view大小大于movable-area的时候,movable-view里是一张地图,然后用定位定了很多坐标点。现在是页面加载后默认显示地图的左上角,怎么才能让页面初始化后定位到某一个点。

现在的效果,页面加载后:

想要的效果,页面加载后直接跳到某一点或者某一指定位置。

wxml

<view class="section" style="height:100vh">
  
    <movable-area style="width:100%;height:100vh;pointer-events:none;">
      <movable-view  style="width:{{mapWidth}};height:{{mapHeight}};pointer-events:auto;" x="{{x}}" y="{{y}}" direction="all" animation="false">


          <image class='img' bindload="imgOnLoad" src="{{imgSrc}}"></image>
          <view wx:for="{{locations}}" id="{{item.id}}">
            <mp-icon
              data-item="{{item}}"
              style="position:absolute;left:{{item.left}};top:{{item.top}};" 
              bindtap="itemtap" 
              type="field" 
              icon="location"
              color="{{item.color}}"
              size="{{35}}">
            </mp-icon>
          </view>
        
      </movable-view>
    </movable-area>
  
</view>

wxss

.img{
  width100%;
  height100%;
  clear:both;
  display: block;
}
movable-view {
  pointer-events: auto;
}
movable-area {
 pointer-events: none;
}

js

//guide.js
//获取应用实例
const app = getApp()
Page({
  data: {
    x0,
    y0,
    imgSrc:'',
    mapWidth:'',
    mapHeight:''
  },
  onLoadfunction (e{
    var that=this;
    wx.showLoading({
      title'加载中......'
    });
    this.setData({
      imgSrc:app.globalData.appBean.map1.map_bg,
      mapWidth:app.globalData.appBean.map1.width,
      mapHeight:app.globalData.appBean.map1.height,
    });
  },
  imgOnLoad(ev) {
    wx.hideLoading();
  }
  //用户点击右上角分享
  onShareAppMessagefunction () {
    return{
      title:"云游校园",
      path:"/pages/guide/guide",
    }
  },


})


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

3 个回答

  • Walker
    Walker
    2020-05-06

    楼主是刚加载进来就是一张局部图片吗?有办法一进来展示全图,然后进行放大拖拽吗

    2020-05-06
    有用
    回复
  • ฅᰩ🐶᭄ฅ
    ฅᰩ🐶᭄ฅ
    2020-04-24

    楼主解决了吗?是怎么的解决的哦?

    2020-04-24
    有用
    回复
  • #7723
    #7723
    2020-04-23

    试过调整data里的x和y的数值 但是效果是加载地图时图片左边和上方会出现白边动画,然后还是一样会默认左上角

    2020-04-23
    有用
    回复 3
    • ฅᰩ🐶᭄ฅ
      ฅᰩ🐶᭄ฅ
      2020-04-24
      我找到解决办法了.将超出区域的边设置为负值就行了.
      2020-04-24
      回复
    • #7723
      #7723
      2020-04-24回复ฅᰩ🐶᭄ฅ
      能否在详细点呢
      2020-04-24
      回复
    • ฅᰩ🐶᭄ฅ
      ฅᰩ🐶᭄ฅ
      2020-04-24回复#7723
      比如我们的地图,是长方形的,X轴是超出屏幕区域的,然后我门需要将中心点移动到图中的某个点,就可以将X轴设置为负值,然后图就会在X轴往左移动.Y轴同理.
      2020-04-24
      回复
登录 后发表内容
问题标签