uni-app 手绘地图 景点导游 点击事件

在处理uni-app中的手绘地图景点导游点击事件时，你可以使用Vue.js框架的相关特性和uni-app提供的API来实现。以下是一个简化的代码案例，展示如何在手绘地图上处理景点的点击事件。

首先，假设你有一个手绘地图的图片，并在图片上叠加了一些景点图标。你需要为这些景点图标绑定点击事件。

1. 页面模板（template）

<template>
  <view class="map-container">
    <image class="map-image" src="/static/map.png" mode="aspectFit"></image>
    <view class="spot" v-for="(spot, index) in spots" :key="index" @click="onSpotClick(spot)" :style="spotStyle(spot)">
      <image :src="spot.icon" mode="aspectFit" class="spot-icon"></image>
    </view>
    <view v-if="selectedSpot" class="info-panel">
      <text>{{ selectedSpot.name }}</text>
      <text>{{ selectedSpot.description }}</text>
    </view>
  </view>
</template>

2. 脚本部分（script）

<script>
export default {
  data() {
    return {
      spots: [
        { id: 1, name: 'Spot 1', description: 'Description of Spot 1', x: 50, y: 100, icon: '/static/spot-icon.png' },
        { id: 2, name: 'Spot 2', description: 'Description of Spot 2', x: 200, y: 150, icon: '/static/spot-icon.png' },
        // 更多景点...
      ],
      selectedSpot: null,
    };
  },
  methods: {
    onSpotClick(spot) {
      this.selectedSpot = spot;
      // 这里可以添加导航或其他逻辑
    },
    spotStyle(spot) {
      return {
        top: `${spot.y}px`,
        left: `${spot.x}px`,
        position: 'absolute',
        width: '50px', // 根据图标大小调整
        height: '50px', // 根据图标大小调整
      };
    },
  },
};
</script>

3. 样式部分（style）

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 500px; /* 根据需要调整 */
}
.map-image {
  width: 100%;
  height: 100%;
}
.spot {
  position: absolute;
}
.spot-icon {
  width: 100%;
  height: 100%;
}
.info-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
}
</style>

这个代码示例展示了如何在uni-app中创建一个手绘地图，并为地图上的景点图标绑定点击事件。当用户点击某个景点时，会显示该景点的名称和描述。你可以根据实际需求进一步扩展和美化这个示例。