扩展三个 marker 标记点，微信小程序地图开发-优快云博客

一、项目简介

本次项目为 uni-app 前端开发课程教材案例 4.9 地图组件实战作业。原教材案例仅实现基础地图展示与少量标记点功能，功能较为单一。根据课程作业扩展要求，我在原有案例基础上自主扩展实现 3 个独立 Marker 标记点位，完善点位标注、点击交互、弹窗提示、地图渲染等全套功能。

本项目基于 uni-app（Vue2） 开发，通过微信小程序模拟器运行调试，无需复杂后端接口，纯前端即可完成地图渲染与点位交互，非常适合新手入门小程序地图开发。

本次实现功能清单

基础 Map 地图组件渲染、中心点定位、缩放拖动功能
自定义 3 个 Marker 地图标记点（作业扩展核心）
标记点唯一 ID 区分、独立点位名称标注
点击标记弹窗文字提示
适配小程序尺寸、全屏自适应布局

二、技术知识点详解

1. map 组件核心作用

map 是 uni-app 内置原生地图组件，专门用于小程序端展示地图界面，支持：

地图中心点经纬度定位
自定义标记点、覆盖物、路线
点击、拖动、缩放监听事件
适配微信官方地图内核

2. markers 属性原理

markers 为数组格式，每一个对象代表一个地图标记点。必填字段：

id：标记唯一标识（用于区分点击对象）
latitude：纬度
longitude：经度
title：标记展示文字

通过数组多对象写法，即可实现多个标记点自由扩展。

3. markertap 点击事件原理

bindmarkertap 为标记点击触发事件，点击任意标记会返回对应 markerId，前端通过匹配 id，即可实现不同点位对应不同提示内容。

三、完整可运行代码

<template>
  <view class="content">
    <!-- 地图核心组件 -->
    <map
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      bindmarkertap="handleMarkerTap"
    >
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 地图中心点（哈尔滨区域）
      latitude: 45.77,
      longitude: 126.66,

      // 作业扩展：3个自定义标记点
      markers: [
        {
          id: 1,
          latitude: 45.77,
          longitude: 126.66,
          title: '点位①：学校主教学楼'
        },
        {
          id: 2,
          latitude: 45.772,
          longitude: 126.662,
          title: '点位②：学校食堂'
        },
        {
          id: 3,
          latitude: 45.768,
          longitude: 126.658,
          title: '点位③：学校图书馆'
        }
      ]
    }
  },
  methods: {
    // 标记点点击事件
    handleMarkerTap(e) {
      // 获取当前点击的标记ID
      let mid = e.detail.markerId
      // 根据ID匹配对应标记信息
      let info = this.markers.find(item => item.id === mid)
      // 弹窗提示
      uni.showToast({
        title: info.title,
        icon: 'none',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.content {
  padding: 20rpx;
}
.map {
  width: 100%;
  height: 520rpx;
  border-radius: 12rpx;
}
</style>