微信小程序地图标记多个位置的方法详解
更新时间：2022年04月21日 11:45:39 作者：算法与编程之美
地图是我们平时经常用到的组件,而且地图是显示在最高层的原生组件,下面这篇文章主要给大家介绍了关于微信小程序地图标记多个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
1 问题
如何在微信小程序实现标记多个位置。
2 方法
1.在pages文件夹下新建image文件夹用来存放标记的图片。
2.在map标签中添加markers属性。
<map
id="map"
style="width: 100%; height:100%;"
scale="17"
markers="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{markers}}"
longitude="116.336590"
latitude="39.941127"
show-location>
</map>3.在.js文件中中添加markers属性。
markers: [
//貘科动物馆
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 0,
iconPath: "../image/动物园.png",
latitude: 39.941386,
longitude: 116.336655,
width: 30, //图片显示宽度
height: 30,//图片显示高度
title:'貘科动物馆',
},
//犀鸟馆
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 1,
iconPath: "../image/动物园.png",
latitude: 39.940826,
longitude: 116.335109,
width: 30,
height: 30,
title:'犀鸟馆'
},
//火烈鸟馆
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 2,
iconPath: "../image/动物园.png",
latitude: 39.940578,
longitude: 116.335977,
width: 30,
height: 30,
title: '火烈鸟馆'
},
//鹦鹉馆
{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
id: 3,
iconPath: "../image/动物园.png",
latitude: 39.941573,
longitude: 116.335544,
width: 30,
height: 30,
title: '鹦鹉馆'
}]4.注意：
①iconpath属性的路径要与标记图片保存的路径一致；
②markers属性的代码要放在data{}里面，否则不会显示标记点；
③标记点的坐标可以在腾讯地图坐标拾取器（https://lbs.qq.com/getPoint/）中查询。
5.完成以上操作后效果如图：
本次标记点用到的图标是：
3 结语
本次介绍了如何在微信小程序的地图上插入标记点，下期将介绍小程序地图不同标记点的跳转。
到此这篇关于微信小程序地图标记多个位置的文章就介绍到这了,更多相关小程序地图标记位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序开发之路由切换页面重定向问题，又通过实例代码给大家介绍了微信小程序的路由跳转方法,需要的朋友可以参考下2018-09-09
Arrays(数组) 数组是一个固定长度的存储相同数据类型的数据结构,数组中的元素被存储在一段连续的内存空间中,下面这篇文章主要给大家介绍了关于JavaScript第一个分水岭之数组的基本操作,需要的朋友可以参考下2022-04-04
这篇文章主要为大家介绍了JavaScript解构赋值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章介绍了复制到剪切板js代码，有需要的朋友可以参考需要2013-06-06
单例模式（Singleton Pattern）是一种创建型设计模式,确保一个类只有一个实例,并提供全局访问该实例的方式,这在某些场景下非常有用,例如配置管理类、日志类或数据库连接管理类,需要的朋友可以参考下2024-08-08
“return false”之所以被误用的如此厉害，是因为它看起来像是完成了我们交给它的工作，浏览器不会再将我们重定向到href中的链接，表单也不会被继续提交，但这么做到底有什么不对呢2013-11-11
这篇文章主要介绍了js中回调函数的相关知识,需要的朋友可以参考下2014-07-07
electron-builder 的基本使用及electron打包步骤
electron-builder 作为一个用于 Electron 应用程序打包的工具,需要下载并使用 Electron 运行时来创建可执行文件,这篇文章主要介绍了electron-builder 的基本使用,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了js实现网页标题栏闪烁提示效果的方法,以实例形式分析了网上比较常见的实现方法,并对于原理进行分析并加以改进,最后给出了一个具体的应用实例供大家参考,需要的朋友可以参考下2014-11-11
在 localStorage 中上传和检索存储图像的示例详解
这篇文章主要介绍了在 localStorage 中上传和检索存储图像,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论