微信小程序制作楼栋鸟瞰分布图

最新推荐文章于 2024-03-14 19:06:23 发布

hangGe0111

最新推荐文章于 2024-03-14 19:06:23 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序楼栋分布

本文链接：https://blog.csdn.net/hangge0111/article/details/103047876

本文介绍了如何使用微信小程序制作楼栋鸟瞰分布图。首先，后台上传楼栋底图并定位坐标，然后通过前端for循环显示楼栋状态图标。点击图标获取数据并展示信息。由于不同楼盘的底图尺寸各异，需要计算图片的缩放比例。文章提供了wxml、wxss和js的代码实现，并展示了最终效果。

1.思路

后台上传一张楼栋背景图底图，分别定位出每个楼栋号的横向，和纵向的坐标位置，通过for循环展示每个楼栋状态的icon，点击每个icon获取当前index，取到数据对应信息展示即可。因为后台楼栋分布底图每个楼盘可能都不一样，但是前台展示会有一个大小（不可能不限宽和不限高），所以这里会涉及一个背景图缩放比的计算问题。图片缩放比的计算，点击参考这篇文章。

2.代码实现

2.1wxml

<view class='container'>
  <view class='title'>楼栋鸟看图</view>
  <view class='main'>
    <image bindload='nktLoad' mode="widthFix" class='mian-img' src='http://img17.house365.com/njnewhouse/2017/07/17/1500283913596c8409348e7.jpg'></image>
    <view class='mainUl' wx:if='{
  
  {fdnktLoad}}'>
      <view catchtap='clickIcon' class='mainLi {
  
  {index==fdnktIndex?"on":""}}' wx:for="{
  
  {arrData}}" data-index="{
  
  {index}}" style='left:{
  
  {item.x*picW}}px;top:{
  
  {(1-item.y)*picH}}px'>
        <view class='mainLi-all'>
          <text class='mainLi-all-

最低0.47元/天解锁文章