更新记录

1.0.1（2025-11-13）

更新手动下载

1.0.0（2025-11-13）

answer-TencentMaps

腾讯地图位置选择组件，基于uni-app开发，支持地图显示、定位、地址搜索、自定义标记点和位置选择等功能。

功能特性

平台兼容性

uni-app(3.6.14)

uni-app x(3.6.14)

answer-TencentMaps

腾讯地图位置选择组件，基于uni-app开发，支持地图显示、定位、地址搜索、自定义标记点和位置选择等功能。

功能特性

• 🗺️ 地图显示：集成腾讯地图，支持地图缩放、平移等基本操作
• 📍 定位功能：自动定位用户当前位置，并在地图上显示标记
• 🔍 地址搜索：支持关键词搜索地址，显示搜索结果列表
• 📌 自定义标记点：可配置多个自定义标记点，点击显示详细信息
• 📱 位置选择：用户可选择地图上的位置或搜索结果，返回位置信息
• 💬 信息窗口：点击标记点显示详细信息窗口

安装方法

方式一：uni_modules 安装（推荐）

在 HBuilderX 中，打开项目，点击顶部菜单栏的「工具」-「插件市场」，搜索「answer-TencentMaps」，点击「使用 HBuilderX 导入插件」即可。 1.根目录执行 npm install qqmap-wx-jssdk --save

方式二：手动安装

1. 下载组件包
2. 解压后将 answer-TencentMaps 文件夹复制到项目的 uni_modules 目录下
3. !!!!!!一定要替换您在腾讯地图申请的key
4. 在 pages.json 文件中配置腾讯地图 Key：
5. 根目录执行 npm install qqmap-wx-jssdk --save

使用方法

1. 配置腾讯地图 Key

在 pages.json 文件中配置腾讯地图 Key：

{
  "globalStyle": {
    // ...
  },
  "pages": [
    // ...
  ],
  "plugins": {
    "map": {
      "provider": "tencent",
      "key": "您的腾讯地图Key"
    }
  }
}

2. 在页面中使用组件

<template>
  <view>
    <!-- 使用地图组件 -->
    <answer-TencentMaps @selectedLocation="selectPosition"></answer-TencentMaps>
  </view>
</template>

<script>
export default {
  methods: {
    // 处理选择的位置信息
    selectPosition(e) {
      console.log('选择的位置信息:', e);
      // 这里可以处理选择位置后的逻辑
      // 例如：保存位置信息、返回上一页等
    }
  }
}
</script>

<style>
/* 页面样式 */
</style>

API 说明

Props

Events

locationObject 结构

{
  id: String/Number, // 位置ID
  name: String, // 位置名称
  address: String, // 详细地址
  latitude: Number, // 纬度
  longitude: Number, // 经度
  distance: String, // 距离（如：1.2km）
  province: String, // 省份（仅当前位置有）
  city: String, // 城市（仅当前位置有）
  district: String, // 区（仅当前位置有）
  street: String, // 街道（仅当前位置有）
  imagesArr: Array, // 图片数组（仅自定义标记点有）
  rating: Number // 评分（仅自定义标记点有）
}

组件结构说明

主要功能模块

1. 地图组件：显示腾讯地图，支持缩放、平移等操作
2. 定位按钮：点击重新定位到当前位置
3. 搜索面板：输入关键词搜索地址
4. 搜索结果列表：显示搜索结果，支持点击选择
5. 当前地址信息：显示当前选中的位置信息
6. 信息窗口：点击自定义标记点时显示详细信息

核心方法

• locate()：定位用户当前位置
• searchAddress()：搜索地址
• selectLocation(item)：选择位置
• sendLocation()：发送选择的位置信息
• onMarkerTap(e)：处理标记点点击事件

注意事项

1. 地图权限：确保在 manifest.json 中配置了位置权限

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于定位服务"
      }
    }
  },
  "h5": {
    "permission": {
      "scope.userLocation": {
        "desc": "您的位置信息将用于定位服务"
      }
    }
  }
}

2. 腾讯地图 Key：必须在腾讯地图开放平台申请有效的 Key
3. 自定义标记点：可以在组件内部修改 initCustomMarkers() 方法来自定义标记点数据
4. 静态资源：组件使用了以下静态资源，需要确保这些资源存在：
   • /static/getPlace.png（定位图标）
   • /static/search.png（搜索图标）
   • /static/myPlace.png（当前位置标记图标）
   • /static/storeAddress.png（自定义标记点图标）

依赖

• qqmap-wx-jssdk：腾讯地图微信小程序 JavaScript SDK

兼容性

• ✅ 微信小程序
• ✅ H5
• ✅ App（Android/iOS）

更新日志

v1.0.0

• 初始版本发布
• 实现地图显示、定位、搜索、自定义标记点等功能

许可证

MIT License

作者

answer

反馈与建议

如有问题或建议，请在插件市场留言或提交 Issue。