当前位置： 首页 > news >正文

微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡

news 来源：原创 2024/5/9 2:40:29

老规矩先上效果图:

 1 、在pages文件夹下新建image文件夹用来存放标记的图片。

2、代码片段 也可以参考小程序文档：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

index.wxml代码 

 <mapid="map"style="width: 100%; height:100%;"scale="17"markers="{{markers}}"longitude="116.336590"latitude="39.941127"show-location></map>

js代码： // 在.js文件中中添加markers属性。

markers: [{id: 0,iconPath: "../image/1.png",latitude: 39.941386,longitude: 116.336655,width: 30,  //图片显示宽度height: 30,//图片显示高度title:'1',},{id: 1,iconPa

相关文章：

  • 【Spring Boot】创建你的第一个 Spring Boot 应用
  • 【STM32定时器（一）内部时钟定时与外部时钟 TIM小总结】
  • mysql报错日志查看
  • 智慧城市与数字孪生：共创未来城市的智慧生活
  • Unity如何让游戏程序读写资源文件？
  • MySQL模块---更新和删除数据
  • 【计算机网络】https的工作原理以及和http的区别
  • Leet code 179 最大数
  • 【PyTorch】基础学习：在Pycharm等IDE中打印或查看Pytorch版本信息
  • 白话模电：3.三极管(考研面试与笔试常考问题)
  • 【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列一：R-CNN图文详解
  • Django验证码（二）
  • 基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的自动驾驶目标检测系统详解（深度学习+Python代码+PySide6界面+训练数据集）
  • GAMES104-现代游戏引擎 1
  • 用 Visual Studio 调试器中查看内存中图像
  • ----------
  • [原]深入对比数据科学工具箱：Python和R 非结构化数据的结构化
  • Apache Spark Streaming 使用实例
  • HTTP--网络协议分层，http历史(二)
  • Java IO学习笔记一
  • JavaScript对象详解
  • magento 货币换算
  • MYSQL 的 IF 函数
  • vue 个人积累(使用工具，组件)
  • 互联网大裁员：Java程序员失工作，焉知不能进ali？
  • 近期前端发展计划
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 前嗅ForeSpider中数据浏览界面介绍
  • 数组大概知多少
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 怎样选择前端框架
  • Android开发者必备：推荐一款助力开发的开源APP
  • linux 淘宝开源监控工具tsar
  • 组复制官方翻译九、Group Replication Technical Details
  • ​LeetCode解法汇总2696. 删除子串后的字符串最小长度
  • ​力扣解法汇总1802. 有界数组中指定下标处的最大值
  • # C++之functional库用法整理
  • (2)Java 简介
  • （33）STM32——485实验笔记
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节（封装和窗体）
  • （非本人原创）史记·柴静列传(r4笔记第65天)
  • (一) storm的集群安装与配置
  • （一）SpringBoot3---尚硅谷总结
  • (转) 深度模型优化性能 调参
  • (转)ORM
  • （转）大道至简，职场上做人做事做管理
  • （转载）跟我一起学习VIM - The Life Changing Editor
  • ... 是什么 ？... 有什么用处?
  • .axf 转化 .bin文件 的方法
  • .NET Core 中的路径问题
  • .net refrector
  • .NET/C# 反射的的性能数据，以及高性能开发建议（反射获取 Attribute 和反射调用方法）
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地定义和使用弱事件
  • .net操作Excel出错解决
  • .NET教程 - 字符串 编码 正则表达式（String Encoding Regular Express）