自定义旅游地图锚点
#微信小程序 2023-03-10

使用透明view，实现旅游地图上的锚点链接

最近在做“游阅石龙”小程序的时候，做到了旅游地图，我希望能在地图上点击特定地点，跳转或弹窗，介绍这个地点的介绍。就浅浅记录一下功能实现的方法吧。

首先，放置地图图片需要一个容器 <movable-view>，这是一个可缩放、移动的视图容器，而这个容器需要另外一个容器，限制它的移动区域，那就是<movable-area>了

用法

1
2
3
4
5
6
7
8
9
10
11
<!-- imdex.wxml -->
<view class="mapBox">
  <movable-area>
    <!-- direction：movable-view的移动方向
    scale：是否支持双指缩放
    scale-min max value：缩放最小值 缩放最大值 缩放默认 -->
    <movable-view direction="all" scale="true" scale-min="0.5" scale-max="7" scale-value="0.5">
      <imgae src="/pic/pic.png" mode="widthFix"/>
    </movable-view>
  <movable-area>
</view>

tips：

movable-area必须设置width和height属性，不设置默认为10*10px

其余设定可以直接参考微信开放文档

这样基本框架就搭好了，地图图片可以在区域内随意滑动、缩放。

接下来就是做图片上的锚点链接了

做这个锚点链接其实很多方法，我这里也是参考了社区大佬的方式，取巧实现的。那就是使用一个透明的<view>，定位到地图上的点位，实现可点击锚点。

做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- imdex.wxml -->
<view class="mapBox">
  <movable-area>
    <movable-view direction="all" scale="true" scale-min="0.5" scale-max="7" scale-value="0.5">
      <imgae src="/pic/pic.png" mode="widthFix"/>
      <!-- 浮动锚点，这里偷懒用的微信开发者工具里的可视化，所以样式直接附在元素内了 -->
      <view class="bindtapIcon" 
        style="left: 500rpx; 
        top: 880rpx; 
        position: fixed; 
        width: 100rpx; 
        height: 190rpx; 
        display: block; 
        box-sizing: border-box">
      </view>
    </movable-view>
  <movable-area>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* index.wxss */

/* mapBox部分 注意所有尺寸使用 rpx 自适应*/
.mapBox{
  width: 630rpx;
  height: 860rpx;
  margin-top: 4em;
  margin-bottom: 1em;
  border: .8px dashed rgb(75, 146, 99);
  border-radius: 10px;
  /* 隐藏图片溢出区域 */
  overflow: hidden;
}

movable-area{
  width: 100%;
  height: 860rpx;
}

movable-view{
  position: relative;
  width: 1252rpx;
  height: 1712rpx;
  /* 观察区域大小 */
  /* border: 1px solid red; */
}

.mapBox image{
  width: 1712rpx;
  height: 1252rpx;
  top: 25%;
  left: -20%;
  position: absolute;
  transform: rotate(90deg);
  /* 观察图片区域 */
  /* border: 1px solid red; */
}

/* 锚点 */
.bindtapIcon{
  /* 使用fixed定位锚点 */
  position: fixed;
  /* 给定初始大小 */
  width: 5px;
  height: 5px;
  /* 用于观察锚点位置，取消后锚点透明 */
  background-color: rgba(85, 216, 73, 0.8);
}

到这里，锚点的设置基本就做好了，可以直接用微信开发者工具的可视化定位锚点。注意：所有定位的单位需要使用“rpx”等自适应的属性，否则不同机型大小会影响锚点的定位。

接下来就是页面跳转了

做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- imdex.wxml -->
<view class="mapBox">
  <movable-area>
    <movable-view direction="all" scale="true" scale-min="0.5" scale-max="7" scale-value="0.5">
      <imgae src="/pic/pic.png" mode="widthFix"/>
      <!-- 浮动锚点，这里偷懒用的微信开发者工具里的可视化，所以样式直接附在元素内了 -->
      <view class="bindtapIcon" 
        style="left: 500rpx; 
        top: 880rpx; 
        position: fixed; 
        width: 100rpx; 
        height: 190rpx; 
        display: block; 
        box-sizing: border-box" 
        bindtap="mapSwitchTab" 
        data-id="{{locationInfo[0].id}}">
      </view>
      <!-- 指定方法，data-id传值 -->
    </movable-view>
  <movable-area>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// index.js
Page({
  data:{
    // 定义锚点数据
    locationInfo:[
      {id:"001", title:"杠空间"}
    ]
  },
  // 地图锚点跳转介绍页面
  mapSwitchTab: function(e){
    // 查看id
    console.log(e.currentTarget.dataset.id)
    this.setData({value:e.currentTarget.dataset.id})
    wx.navigateTo({
      // 跳转地址，传参
      url: '/pages/location/location?value='+this.data.value,
      success(){
        console.log("跳转成功");
      }
    })
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// location.js
Page({
  data:{
    locationInfo:[
      {id:'001', title:"杠空间", introduction:"这是一段简介"}
    ]
  },
  // 加载时接收参数，展示相对应的数据
  onLoad(options) {
    for (let index = 0; index < this.data.locationInfo.length; index++) {
      if(this.data.locationInfo[index].id === options.value){
        this.setData({value:options.value}) 
      }
    }
  },
})

到这里基本就做完啦，当然数据最好还是上数据库，不过开发前期，测试使用静态数据也足够了，嘻嘻。