小程序地图展示poi帖子点击可跳转

小程序地图展示poi帖子点击可跳转

是类似于小红书地图功能的需求
效果展示

缺点

一个帖子只能有一个点击事件,不适合太复杂的功能,因为一个markers只有一个回调回调中只有markerId可以使用。

需求介绍

  1. 页面有地图入口,点开可打开地图界面
  2. 地图上展示命中poi的帖子。
  3. 帖子有图片,文字,用户头像以及用户名称
  4. 帖子可以自定义样式

代码

地图页面,地图相关的属性小程序文档有详细的介绍。主要使用了markers功能,可以在地图上面渲染一层view,再结和气泡属性customCallout实现。需要注意的是文档中虽然写了可以同层渲染但亲测在手机端会不显示,所以气泡结构全使用cover-的结构。

<mapid="map"style="width:100%;height: 100%;"latitude="{{latitude}}"scale="{{scale}}"longitude="{{longitude}}"subkey="{{mapKey}}"markers="{{markers}}"bindmarkertap="markertap"bindcallouttap="handleTap"><cover-view slot="callout"><block wx:for="{{calloutList}}" wx:key="index"><cover-view class="callout" marker-id="{{item.id}}"><cover-image class="icon" mode="aspectFill" src="{{item.contentSummary.imageList[0].url}}" ></cover-image><cover-view class="content"><cover-view class="title">{{item.title}}</cover-view><cover-view class="user-info"><cover-image class="avatar" src="{{item.postUser.avatarUrl}}" mode="aspectFill"/><cover-view>{{item.postUser.nickName}}</cover-view></cover-view></cover-view></cover-view></block></cover-view>
</map>

js需要data中需要定义好map绑定的属性,subkey是地图的key需要自己去腾讯地图的官网申请一下。

data: {latitude: 39.940115,scale: 17,longitude: 116.432503,subkey: config.KEY,// 地图标记markers: [],},
// 数据结构就不贴出来了,自己定义就可以,demoData在onload中调用以保证打开页面就能显示
demoData() {// 伪代码:假设从服务器获取数据,实际使用时需要传入请求参数和回调函数const data = wx.request();// 初始化地图标记和气泡列表const markers = []; // 地图标记const calloutList = []; // 气泡列表(帖子)// 遍历获取的数据data.forEach((item, index) => {const poiInfo = item.contentSummary.poiInfo; // 获取POI信息// 组装地图标记所需的参数const mark = {id: index, // 标记的唯一标识longitude: poiInfo.longitude, // 经度latitude: poiInfo.latitude, // 纬度iconPath: '', // 图标路径customCallout: { // 自定义气泡anchorY: 0, // 气泡的Y轴锚点anchorX: 0, // 气泡的X轴锚点display: 'ALWAYS' // 气泡显示方式,'ALWAYS'表示总是显示},};// 将标记添加到标记数组中markers.push(mark);// 给气泡添加唯一标识item.id = index;// 将气泡添加到气泡列表中calloutList.push(item);});// 更新页面数据this.setData({ markers, calloutList });
}

css 就正常写就行

.callout {box-sizing: border-box;background-color: #fff; border: 0.81px solid #CED6D9;border-radius: 12px;width: 178px;height: 67px;display: flex;padding: 6px;
}.icon {width: 44px;height: 55px;border-radius: 8px;
}.avatar {width: 16px;height: 16px;border-radius: 50%;
}.user-info {font-family: 'PingFang SC';font-size: 12px;font-weight: 400;line-height: 12px;text-align: left;color: #000000EB;display: flex;align-items: center;margin-top: 2px;
}.content {display: flex;flex-direction: column;flex: 1;padding-left: 4px;
}.title {font-size: 14px;font-weight: 400;text-align: left;white-space: normal;display: -webkit-box;overflow: hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex: 1;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/429106.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python:编写一个函数查找字符串中的最长公共前缀

最近在csdn网站上刷到一个题目&#xff0c;题目要求编写一个函数查找字符串中的最长公共前缀&#xff0c;题目如下&#xff1a; 给出的答案如下&#xff1a; from typing import List def longestCommonPrefix(strs:List[str]) -> str:if len(strs) 0:return i 0 #代…

2024/9/21 数学20题

常见概率可加性&#xff1a;

网络安全详解

目录 引言 一、网络安全概述 1.1 什么是网络安全 1.2 网络安全的重要性 二、网络安全面临的威胁 2.1 恶意软件&#xff08;Malware&#xff09; 2.2 网络钓鱼&#xff08;Phishing&#xff09; 2.3 中间人攻击&#xff08;Man-in-the-Middle Attack&#xff09; 2.4 拒…

Mac 搭建仓颉语言开发环境(Cangjie SDK)

文章目录 仓颉编程语言通用版本SDK Beta试用报名仓颉语言文档注册 GitCode登录 GitCode 下载 Cangjie SDK配置环境变量VSCode 插件VSCode 创建项目 仓颉编程语言通用版本SDK Beta试用报名 https://wj.qq.com/s2/14870499/c76f/ 仓颉语言文档 https://developer.huawei.com/c…

Redis——持久化策略

Redis持久化 Redis的读写操作都是在内存上&#xff0c;所以Redis性能高。 但是当重启的时候&#xff0c;或者因为特殊情况导致Redis崩了&#xff0c;就可能导致数据的丢失。 所以Redis采取了持久化的机制&#xff0c;重启的时候利用之间持久化的文件实现数据的恢复。 Redis提…

Golang | Leetcode Golang题解之第424题替换后的最长重复字符

题目&#xff1a; 题解&#xff1a; func characterReplacement(s string, k int) int {cnt : [26]int{}maxCnt, left : 0, 0for right, ch : range s {cnt[ch-A]maxCnt max(maxCnt, cnt[ch-A])if right-left1-maxCnt > k {cnt[s[left]-A]--left}}return len(s) - left }f…

PyCharm与Anaconda超详细安装配置教程

1、安装Anaconda&#xff08;过程&#xff09;-CSDN博客 2.创建虚拟环境conda create -n pytorch20 python3.9并输入conda activate pytorch20进入 3.更改镜像源conda/pip(只添加三个pip源和conda源即可) 4.安装PyTorch&#xff08;CPU版&#xff09; 5.安装Pycharm并破解&…

猫咪检测系统源码分享

猫咪检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

USDT自动化交易【Pinoex】【自动化分析】【ChatGPT量化脚本】

Pinoex 是一个相对较新的加密货币交易平台&#xff0c;虽然具体的自动交易算法细节对外部用户可能并不公开&#xff0c;但我们可以讨论一般情况下加密货币自动交易算法的常见策略和方法。以下是一些可能会被类似平台或个人交易者使用的自动交易算法和策略。 1. 市场制造商&…

Google 扩展 Chrome 安全和隐私功能

过去一周&#xff0c;谷歌一直在推出新特性和功能&#xff0c;旨在让用户在 Chrome 上的桌面体验更加安全&#xff0c;最新的举措是扩展在多个设备上保存密钥的功能。 到目前为止&#xff0c;Chrome 网络用户只能将密钥保存到 Android 上的 Google 密码管理器&#xff0c;然后…

计算机网络17——IM聊天系统——客户端核心处理类框架搭建

目的 拆开客户端和服务端&#xff0c;使用Qt实现客户端&#xff0c;VS实现服务端 Qt创建项目 Qt文件类型 .pro文件&#xff1a;配置文件&#xff0c;决定了哪些文件参与编译&#xff0c;怎样参与编译 .h .cpp .ui&#xff1a;画图文件 Qt编码方式 Qt使用utf-8作为编码方…

从零开始学习TinyWebServer

写在前面 项目参考&#xff1a;https://github.com/qinguoyi/TinyWebServer 写作框架/图参考&#xff1a;https://blog.csdn.net/qq_52313711/article/details/136356042?spm1001.2014.3001.5502 原本计划是&#xff0c;先将项目代码大概看一遍&#xff0c;然后再着手实现一下…

《高等代数》线性相关和线性无关(应用)

说明&#xff1a;此文章用于本人复习巩固&#xff0c;如果也能帮到大家那就更加有意义了。 注&#xff1a;1&#xff09;线性相关和线性无关的证明方法中较为常用的方法是利用秩和定义来证明。 2&#xff09;此外&#xff0c;线性相关和线性无关的证明常常也会用到反证法。 3&…

ChatGPT 4o 使用指南 (9月更新)

首先基础知识还是要介绍得~ 一、模型知识&#xff1a; GPT-4o&#xff1a;最新的版本模型&#xff0c;支持视觉等多模态&#xff0c;OpenAI 文档中已经更新了 GPT-4o 的介绍&#xff1a;128k 上下文&#xff0c;训练截止 2023 年 10 月&#xff08;作为对比&#xff0c;GPT-4…

play-with-docker使用指南

Play-with-Docker(PWD)是一个在线平台,提供免费的 Docker 实验环境。它允许用户在浏览器中创建和管理 Docker 容器,适合学习和实验。国内访问需要借助于魔法工具,否则可能无法访问哦。 网站地址:https://labs.play-with-docker.com/ 一、登录play-with-docker 点击页面上…

深度学习自编码器 - 去噪自编码器篇

序言 在深度学习的广阔天地中&#xff0c;自编码器作为一种强大的无监督学习工具&#xff0c;通过重构输入数据的方式&#xff0c;不仅实现了数据的有效压缩&#xff0c;还探索了数据的内在表示。而去噪自编码器&#xff08; Denoising Autoencoder, DAE \text{Denoising Auto…

Java | Leetcode Java题解之第424题替换后的最长重复字符

题目&#xff1a; 题解&#xff1a; public class Solution {public int characterReplacement(String s, int k) {int len s.length();if (len < 2) {return len;}char[] charArray s.toCharArray();int left 0;int right 0;int res 0;int maxCount 0;int[] freq n…

C++:多态(协变,override,final,纯虚函数抽象类,原理)

目录 编译时多态 函数重载 模板 运行时多态 多态的实现 实现多态的条件 协变 析构函数的重写 override 关键字 final 关键字 重载、重写、隐藏对比 纯虚函数和抽象类 多态的原理 多态是什么&#xff1f; 多态就是有多种形态 多态有两种&#xff0c;分别是编译时…

黑马智数Day1

src文件夹 src 目录指的是源代码目录&#xff0c;存放项目应用的源代码&#xff0c;包含项目的逻辑和功能实现&#xff0c;实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 &#xff08;图片&#xff09; components - 组件 公共组件 constants…

LeetCode 面试经典 150 题回顾

目录 一、数组 / 字符串 1.合并两个有序数组 &#xff08;简单&#xff09; 2.移除元素 &#xff08;简单&#xff09; 3.删除有序数组中的重复项 &#xff08;简单&#xff09; 4.删除有序数组中的重复项 II&#xff08;中等&#xff09; 5.多数元素&#xff08;简单&am…