微信小程序地图点击设置范围并创建区域蒙层

微信小程序用户点击地图，创建marker并且连接marker绘制出一块区域。

1.index.wxml

代码如下（示例）：

<map id="myMap" longitude="{{longitude}}" bindtap="bindtap" latitude="{{latitude}}" scale="14"  polygons="{{polygons}}" show-location  markers="{{markerArray}}"></map>

2.index.js

代码如下（示例）：


Page({/*** 页面的初始数据*/data: {marker: "marker",latitude: "24.47951",longitude: "118.08948",//这个是你的经纬度// polygons:[],polygons: [{points: [{//这里的数组是你规定的多边形区域，//同上所述 你要在map上找到你所要的坐标 进行划分值longitude: 118.082771,latitude: 24.494959},{longitude: 118.061142,latitude: 24.486836}, {longitude: 118.082771,latitude: 24.494959}],fillColor: "#F2D7BC99",//这里面设置透明度 后面加数字代表透明度strokeColor: "#FFF",strokeWidth: 2,zIndex: 1}],points: [],// 存放点击的坐标markerArray: []},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},bindtap: function (e) {var markerArray = this.data.markerArrayvar points = this.data.pointsvar point = e.detailpoints.push(point)markerArray.push({id:Number(new Date()),longitude: point.longitude,latitude: point.latitude,width:30,height:30,iconPath: '../static/image/marker.jpeg',})if (markerArray.length < 5) {this.setData({points: points,polygons: [{points: this.data.points,fillColor: "#F2D7BC99",//这里面设置透明度 后面加数字代表透明度strokeColor: "#FFF",strokeWidth: 2,zIndex: 1}],markerArray:markerArray})console.log(this.data);}},
})

提示

目前仅为测试，已实现效果。样式不精美，有待进一步改善。

微信小程序地图点击设置范围并创建区域蒙层相关推荐

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

微信小程序地图点击设置范围并创建区域蒙层

微信小程序地图点击设置范围并创建区域蒙层

1.index.wxml

2.index.js

提示

微信小程序地图点击设置范围并创建区域蒙层相关推荐

最新文章

热门文章