微信小程序地图标记多个位置的方法详解
更新时间:2022年4月21日 16:37 点击:946 作者:算法与编程之美
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 结语
本次介绍了如何在微信小程序的地图上插入标记点,下期将介绍小程序地图不同标记点的跳转。
到此这篇关于微信小程序地图标记多个位置的文章就介绍到这了,更多相关小程序地图标记位置内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/gschen_cn/article/details/121045616
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
- overlay就是在地图上以另外一种形式浮现在地图上,常见的地图覆盖物为这三种类型,如:popup 弹窗、label标注信息、text文本信息等,接下来跟随小编看下openlayers6之地图覆盖物overlay详解,一起看看吧...2021-09-15
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
本文给大家介绍javascript实现高德地图和百度地图提取行政区边界经纬度坐标的相关知识,本文实用性非常高,代码简单易懂,需要的朋友参考下吧...2016-01-24- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16