uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线

我们可以参考uni-app官网链接地图块

显示气泡标注和多边形

 <mapv-if="longitude && latitude"style="width: 100%; height: 100%;"id="myMap"ref="myMap":latitude="latitude":longitude="longitude":scale="16":show-location="true":enable-satellite="true":include-points="farmlandList[0].mapAreaList":markers="markerPoints":polygon="markerPolygon"@markerTap="tapMarker"></map>

这里farmlandList的大概的结构：

 farmlandList: [// // 一个农田的完整信息如下:// {//     id: 100, // 农田id//  name: '张三的农田', // 农田名称//  status: 2, // 认证状态(2-审核中; 4-已认证)//  // 地块闭合坐标点列表//  mapAreaList: [//        // 至少3个点//      {//             latitude: 30.32113482877577, // 纬度//            longitude: 120.18156108860434, // 经度//      },//        // ...//    ]// },// // ...]

include-points属性因为我们这个地图是存在多个多变形，我们是显示了接口中第一个多边形坐标组。
markers是显示标记点,这里我们因为业务需求留了3个状况，如果没有认证，标记停留当前经纬度，显示立即认证标签，其余的为遍历farmlandList展示后端数据传值过来的数据：

    markerPoints() {// 未认证过农田if (this.farmlandList.length === 0) {return [{id: "initial-certification",longitude: this.longitude,latitude: this.latitude,iconPath: "/static/markLand/dot_hidden.png",anchorX: 0.5,anchorY: 0,width: 1,height: 1,label: {content: "立即认证 >",color: "#ffffff",fontSize: 14,borderRadius: 10,bgColor: "#C89D67",padding: 16,},},];}// 认证过农田且当前存在审核中/已认证的农田return this.farmlandList.map((item) => {// 已认证if (item.status === 4) {return {id: Math.random().toString().substr(2),longitude: item.centerPoint.longitude,latitude: item.centerPoint.latitude,iconPath: "/static/markLand/dot_hidden.png",anchorX: 0.5,anchorY: 0,width: 1,height: 1,label: {content:item.name.length > 6? `${item.name.substr(0, 6)}...`: item.name,color: "#ffffff",fontSize: 14,borderRadius: 10,bgColor: "#37B578",padding: 10,},};}// 审核中if (item.status === 2) {return {id: Math.random().toString().substr(2),longitude: item.centerPoint.longitude,latitude: item.centerPoint.latitude,iconPath: "/static/markLand/dot_hidden.png",anchorX: 0.5,anchorY: 0,width: 1,height: 1,label: {content: "审核中",color: "#ffffff",fontSize: 14,borderRadius: 10,bgColor: "#D7BC0C",padding: 10,},};}});},

polygon显示闭合多变形：

    markerPolygon() {// 未认证过农田if (this.farmlandList.length === 0) {return [];}// 认证过农田且当前存在审核中/已认证的农田return this.farmlandList.map((item) => {if (item.status === 4) {return {points: item.mapAreaList,fillColor: "#00b57866", // 填充颜色color: "#00b578ff", // 边框颜色width: 2,zIndex: 100,};}if (item.status === 2) {return {points: item.mapAreaList,fillColor: "#d7bc0c66", // 填充颜色color: "#d7bc0cff", // 边框颜色width: 2,zIndex: 100,};}});},

map画线围多变形

这里业务需求是，点击中心锚点（一个图片）则定点，下一个定点后两个点连线，在3个点后，可以点击闭合按钮将最后一个点和第一个点连起来形成多边形。

     <mapv-if="longitude && latitude"style="width: 100%; height: 100%;"id="my-map"ref="my-map":latitude="latitude":longitude="longitude":scale="12":show-location="true":show-compass="false":enable-satellite="true":setting="{'showScale': 1}":include-points="includePoints":markers="markerPoints":polyline="markerPolyline":polygon="markerPolygon"@tap="tapMap"></map>

点击中心锚点图片，获取当前地图中心点经纬度：

    getMapCenter() {if (this.isCompleteDrawing) {//如果已经形成多边形则点击中心锚点无效return;}const _this = this;this.mapContext.getCenterLocation({success(res) {const { longitude, latitude } = res;_this.landPoints.push({ longitude, latitude });// 兼容安卓机型地图问题(农田标记打点会跳回原始地图中心点)if (_this.platform === 'android') {setTimeout(() => {_this.mapContext.updateComponents({longitude,latitude,});}, 0)}},fail(err) {console.log("------getCenterLocation err: ", err);},});},

markers标记每次打点:
其中

      landPoints: [// {//   latitude: 39.909565, // 纬度//   longitude: 116.396862, // 经度// },// {//   latitude: 39.906367,//   longitude: 116.395746,// },],

    markerPoints() {if (this.landPoints.length <= 0) {return [];}const len = this.landPoints.length;// 1.多边形区域端点const endPointMarkers = this.landPoints.map((item) => {return {id: Math.random().toString().substr(2),iconPath: "/static/markLand/dot.png",width: 16,height: 16,anchorX: 0.5,anchorY: 0.5,...item,};});// 2.多边形区域线段中心点let lineCenterMarkers = this.landPoints.map((item, index) => {// 计算线段中心点经纬度let currentPoint = item,nextPoint,lineCenterLongitude,lineCenterLatitude,distance;if (index === len - 1) {nextPoint = this.landPoints[0];} else {nextPoint = this.landPoints[index + 1];}lineCenterLongitude = (currentPoint.longitude + nextPoint.longitude) / 2;lineCenterLatitude = (currentPoint.latitude + nextPoint.latitude) / 2;distance = calculateDistance([currentPoint.longitude, currentPoint.latitude],[nextPoint.longitude, nextPoint.latitude]);//显示线中间部分xxx米距离return {id: Math.random().toString().substr(2),iconPath: "/static/markLand/dot_hidden.png",iconAppendStr: `${distance} 米`,iconAppendStrColor: "#C89D66",width: 4,height: 4,anchorX: 0.5,anchorY: 0.5,longitude: lineCenterLongitude,latitude: lineCenterLatitude,};});// 未闭合时，去除首尾两点之间线段的中心点if (!this.isCompleteDrawing) {lineCenterMarkers.pop();}// 3.多边形区域中心点let areaCenterPointMarker;if (this.isCompleteDrawing) {// 中心点经/纬度const areaCenterLongitude =this.landPoints.reduce((total, item) => {return total + item.longitude;}, 0) / len;const areaCenterLatitude =this.landPoints.reduce((total, item) => {return total + item.latitude;}, 0) / len;// 区域面积const area = calculateArea(this.landPoints.map((item) => [item.longitude, item.latitude]));areaCenterPointMarker = {id: Math.random().toString().substr(2),iconPath: "/static/markLand/dot_hidden.png",iconAppendStr: `${area} 平方米`,iconAppendStrColor: "#C89D66",width: 4,height: 4,anchorX: 0.5,anchorY: 0.5,longitude: areaCenterLongitude,latitude: areaCenterLatitude,};}// 闭合时，返回端点、线段中心点、区域中心点if (this.isCompleteDrawing) {return [...endPointMarkers,...lineCenterMarkers,areaCenterPointMarker,];}// 未闭合时，返回端点、线段中心点return [...endPointMarkers, ...lineCenterMarkers];},

polyline划线：

    markerPolyline() {if (this.landPoints.length >= 2) {return [{points: [...this.landPoints],color: "#c89d66ff",width: 2,zIndex: 100,},];}return [];},

polygon连接多边形,当我们点击闭合后this.isCompleteDrawing会为true，并且需要经纬度坐标点大于等于3个，不然无法形成多边形：

    markerPolygon() {if (this.isCompleteDrawing && this.landPoints.length >= 3) {return [{points: [...this.landPoints],fillColor: "#c89d6633", // 填充颜色color: "#c89d66ff", // 边框颜色width: 2,zIndex: 100,},];}return [];},

那么我们这里就完成了打点划线，感谢我的leader大佬，支付宝好像都没见过类似的程序，全靠大佬一个个摸索踩坑。

uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线相关推荐

支付宝小程序map地图
我这里使用的mpvue去开发的支付宝小程序,这里记录下使用map地图的过程 <mapid="map":longitude="lon":latitude=& ...
uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了微信小程序中接入使用腾讯地图插件详细教程,并提供了基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
微信小程序-MAP API组件合集
合集不断更新,总有一款适合你~ map组件&API 官方文档组件map | 微信开放文档 APIMapContext | 微信开放文档获取当前的地理位置.速度.wx.getLocation ...
uniapp 小程序map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
文章目录前言一.使用uniapp 原生的map 组件二.发现坑1 三.分析ui图----发现坑2 四.发现坑3 四.发现坑4 五.发现坑5 ----------------很重要,楼主花费了好长 ...
uniapp授权登录微信支付宝小程序获取code和基础信息
项目背景:采用uniapp框架开发微信和支付宝两端小程序,前端授权基础信息和code传给后端获取openid(微信)和user_id(支付宝)建立用户体系. 项目描述:之前分开用原生框架开发的时候,都 ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...

uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线

显示气泡标注和多边形

map画线围多变形

uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线相关推荐

最新文章

热门文章