微信小程序地图实现查找标记地点

1.在小程序官方文档中有一个实例可以参考

2.导入本地实现

3.小程序里面来实现一下

.wxml 文件中

<view class="page-body"><view class="page-section page-section-gap"><mapid="myMap"style="width: 100%; height: 300px;"latitude="{{latitude}}"longitude="{{longitude}}"bindmarkertap="markertap"bindcallouttap="callouttap"bindlabeltap="labeltap"markers="{{markers}}"scale="16"><cover-view slot="callout"><block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"><cover-view  class="customCallout" marker-id="{{item}}" ><cover-image class="icon" src="/image/voice.png"></cover-image><cover-view class="content"> {{num}}-{{item}}-{{index}}</cover-view></cover-view></block></cover-view></map></view>
</view>

在 .wxss 中

.page-section-gap{box-sizing: border-box;padding: 0 30rpx;
}.page-body-button {margin-bottom: 30rpx;
}.customCallout {box-sizing: border-box;background-color: #fff; border: 1px solid #ccc;border-radius: 30px;width: 150px;height: 40px;display: inline-flex;padding: 5px 20px;justify-content: center;align-items: center;
}.circle {width: 20px;height: 20px;border: 1px solid #ccc;border-radius: 50%;
}.icon {width: 16px;height: 16px;
}.content {flex: 0 1 auto;margin: 0 10px;font-size: 14px;
}

在.js 文件中

Page({data: {latitude: 30.870915522712245,longitude: 121.69552166954041,markers: [{id: 1,latitude: 30.872771084672426,longitude: 121.69159491554261,iconPath: '/image/location.png',width:100,hight:100},{id: 2,latitude: 30.872941444638506,longitude: 121.70530636802674,iconPath: '/image/location.png',width:100,hight:100},{id: 3,latitude: 30.871960719601645,longitude: 121.68974419132233,iconPath: '/image/location.png',width:100,hight:100}],customCalloutMarkerIds: [],num: 1},onReady: function (e) {},})

实现效果

注：这里的标记点是测试，实际的要根据数据库来实现

微信小程序地图实现查找标记地点相关推荐

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

微信小程序地图实现查找标记地点

微信小程序地图实现查找标记地点相关推荐

最新文章

热门文章

微信小程序 地图实现查找标记地点

微信小程序 地图实现查找标记地点相关推荐

最新文章

热门文章

微信小程序地图实现查找标记地点

微信小程序地图实现查找标记地点相关推荐