微信小程序地图实现标记多个位置

1 问题

如何在微信小程序实现标记多个位置。

2 方法

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

2.在map标签中添加markers属性。

3.在.js文件中中添加markers属性。

markers: [
//貘科动物馆
{
id: 0,
iconPath: "../image/动物园.png",
latitude: 39.941386,
longitude: 116.336655,
width: 30, //图片显示宽度
height: 30,//图片显示高度
title:'貘科动物馆',
},
//犀鸟馆
{
id: 1,
iconPath: "../image/动物园.png",
latitude: 39.940826,
longitude: 116.335109,
width: 30,
height: 30,
title:'犀鸟馆'
},
//火烈鸟馆
{
id: 2,
iconPath: "../image/动物园.png",
latitude: 39.940578,
longitude: 116.335977,
width: 30,
height: 30,
title: '火烈鸟馆'
},
//鹦鹉馆
{
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 结语

本次介绍了如何在微信小程序的地图上插入标记点，下期将介绍小程序地图不同标记点的跳转。

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）

微信小程序地图实现标记多个位置相关推荐

微信小程序地图使用用户头像标记
一.在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语. 二.自己在开发时遇到的问题: 1.微信头像是网络图片,而地图的 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序接入第三方插件腾讯位置服务地图选点
微信小程序接入第三方插件腾讯位置服务地图选点 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件 1.在小程序服务平台中添加"腾讯位置服务地图选点"插件微 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...

微信小程序地图实现标记多个位置

微信小程序地图实现标记多个位置相关推荐

最新文章

热门文章