基于Vue.js和Baidu Map API的景点展示卡片

应用场景介绍

本卡片主要用于展示附近的景点信息，用户可以通过该卡片快速了解周边的旅游景点，并进行探索和规划。该卡片可应用于旅游网站、地图应用或其他需要展示景点信息的场景。

代码基本功能介绍

该卡片实现了以下基本功能：

使用Baidu Map API在地图上展示用户当前位置和附近的景点
通过搜索栏进行景点名称或地址查询
点击景点图片可查看景点详情（名称、地址、图片）

功能实现步骤及关键代码分析

1. 初始化Baidu Map

<script>
import { ref } from 'vue'
import { BMap } from 'vue-baidu-map'

export default {
  components: { BMap },
  setup() {
    const center = ref({ lng: 110.20521, lat: -7.57507 })
    const zoom = ref(12)
    return { center, zoom }
  },
}
</script>

使用 vue-baidu-map 库初始化 BMap 实例，并指定地图中心点和缩放级别。

2. 渲染地图

<BMap :center="center" :zoom="zoom" style="height:100%;width:100%"></BMap>

将 BMap 实例渲染到页面中，地图将显示指定中心点和缩放级别。

3. 添加景点标记

<script>
import { ref } from 'vue'

export default {
  setup() {
    const markers = ref([
      { lng: 110.20521, lat: -7.57507, title: '景点1' },
      { lng: 110.20521, lat: -7.57507, title: '景点2' },
    ])
    return { markers }
  },
}
</script>

<BMap :markers="markers"></BMap>

使用 markers 数组来定义景点标记，每个标记包含经度、纬度和标题。
将 markers 数组传递给 BMap 组件，在地图上渲染这些标记。

4. 搜索景点

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    return { searchQuery }
  },
}
</script>

<input type="text" v-model="searchQuery" placeholder="Search" />
<button @click="search()">Search</button>

使用 v-model 绑定输入框的值到 searchQuery 数据。
点击搜索按钮时，调用 search() 方法。

5. 查询景点信息

<script>
import { ref } from 'vue'
import { BMap } from 'vue-baidu-map'

export default {
  components: { BMap },
  setup() {
    const searchQuery = ref('')
    const searchResults = ref([])

    const search = async () => {
      const local = new BMap.LocalSearch(BMap.BMAP_STATUS_SUCCESS, {
        onSearchComplete: (results) => {
          searchResults.value = results.poiList.map((poi) => ({
            lng: poi.point.lng,
            lat: poi.point.lat,
            title: poi.name,
            address: poi.address,
          }))
        },
      })
      local.search(searchQuery.value)
    }

    return { searchQuery, searchResults }
  },
}
</script>

使用 BMap.LocalSearch 进行景点查询。
在 onSearchComplete 回调中处理查询结果，并将其存储在 searchResults 数据中。
搜索结果包含标记的经度、纬度、标题和地址。

6. 展示搜索结果

<BMap :markers="searchResults"></BMap>

将 searchResults 数组传递给 BMap 组件，在地图上渲染搜索结果标记。

7. 显示景点详情

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selectedMarker = ref(null)
    return { selectedMarker }
  },
}
</script>

<div v-if="selectedMarker">
  <h1>{{ selectedMarker.title }}</h1>
  <p>{{ selectedMarker.address }}</p>
  <img :src="selectedMarker.image" />
</div>

使用 selectedMarker 数据来存储选中的景点信息。
当用户点击景点标记时，更新 selectedMarker 数据，并在页面中显示景点详情。

总结与展望

开发这段代码的过程让我对Vue.js和Baidu Map API有了更深入的了解。我学会了如何使用这些技术来创建交互式地图应用。

未来，该卡片功能可以进一步拓展和优化：

添加更多景点信息，如开放时间、门票价格和用户评价
实现景点分类和筛选功能
集成导航功能，帮助用户规划路线
响应式设计，适应不同设备屏幕尺寸

ECHO recommendation

ScriptEcho.ai