微信小程序 setData常用错误解决办法:
1、微信小程序中,在wxrequest({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,thisdata来获取,会出现获取不到的情况,调试页面也会报undefiend。
原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wxrequest({});方法的回调函数中,对象已经发生改变,所以已经不是wxrequest({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:
var that=this;//把this对象复制到临时变量that。在success回调函数中使用thatdata就能获取到数据了。
2、下面就是修改代码,必须setData一下,不然地图不会刷新。
markers: { iconPath:
"/picture/bikepng", id: 0, latitude: 23099994, longitude:
113324520, width: 50, height: 50 }
for(var i = 0; i < resdatalength; i++){ //
thatdatamarkers[i]id=i; // markid=i; var param =
{}; var string = "markers["+i+"]id"; param[string] =
resdata[i]Bike_id; thatsetData(param);
var string="markers["+i+"]iconPath"; param[string]
="/picture/bikepng"; thatsetData(param); var
string = "markers["+i+"]latitude"; param[string] =
resdata[i]BIKE_latitude; thatsetData(param);
var string = "markers["+i+"]longitude";
param[string] = resdata[i]BIKE_longitude;
thatsetData(param); var string =
"markers["+i+"]width"; param[string] = 50;
thatsetData(param); var string = "markers["+i+"]height";
param[string] = 50; thatsetData(param);
/ thatsetData({ markers:[{ iconPath:
"/picture/bikepng", id: 0, latitude: 23099994, longitude:
113324520, width: 50, height: 50 }] })/
} // consolelog(resdata[1]) var
markk=thatdatamarkers; thatsetData({markers:markk})
小程序setData()设置,百度找到: >
二、使用步骤
1uniapp开发map说明
使用uniapp是因为它是一个使用vuejs开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多个平台。 使用map地图组件开发,地图组件用于展示地图(使用的时腾讯地图),说一下它的属性有:
longitude(类型为Number,没有默认值,表示中心经度)
latitude(类型为Number,没有默认值,表示中心纬度)
scale(类型为Number,默认值为16,缩放级别取值范围为5-18)
markers(类型为Array数组,类型为数组即表示地图上可以有多个,没有默认值,表示标记点)
polyline(类型为Array数组,没有默认值,表示路线,数组上的所有点连成线)
circles(类型Array数组,表示圆)
controls(类型Array数组,表示控件)
include-points(类型Array数组,表示缩放视野已包含所有给定的坐标点)
enable-3D(类型为Boolean,默认值为false,表示是否显示3D搂块)
show-compass(类型为Boolean,默认值为false,表示为是否显示指南针)
enable-overlooking(类型为Boolean,默认值为false,表示为是否开启俯视)
enable-satellite(类型为Boolean,默认值为false,表示为是否开启卫星图)
enable-traffic(类型为Boolean,默认值为false,表示为是否开启实时路况)
show-location(类型为Boolean,表示显示带有方向的当前定位点)
polygons(类型Array,表示为多边形)
点击属性
@markertap-表示点击标记点时触发,edetail={markerId}
@labeltap-表示点击label时触发,edetail = {markerId}
@callouttap-表示点击标记点对应的气泡时触发,edetail = {markerId}
@controltap-表示点击控件时触发,edetail = {controlId}
@regionchange-表示视野发生变化时触发
@tap-表示点击地图时触发; App-nuve、微信小程序29支持返回经纬度
@updated-表示在地图渲染更新完成时触发
我们在写map组件时,组件的宽/高推荐写直接量,比如说是 750rpx,不要设置百分比值,在uni-app中只支持gcj02坐标。 介绍markers属性-类型为数组Array
由之前描述可知,markers属性类型为Array,表示标记点用于在地图上显示标记的位置。这个数组属性,它里面有它的对象配置属性,分别是:
id,表示标记点id,类型为Number,必填项,marker点击事件回调会返回此id,建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。
latitude,纬度,类型Number,必填项,浮点数,范围 -90 ~ 90
longitude,经度,类型Number,必填项,浮点数,范围 -180 ~ 180
title,标注点名,类型String,不是必填,点击时显示,callout存在时将被忽略
iconPath,显示的图标,类型String,必填项,项目目录下的路径
rotate,旋转角度,类型Number,不是必填,顺时针旋转的角度,范围 0 ~ 360,默认为 0
alpha,标注的透明度,类型Number,不是必填,默认1,无透明,范围 0 ~ 1
width,标注图标宽度,类型Number,不是必填,默认为实际宽度
height,标注图标高度,类型Number,不是必填,默认为实际高度
callout,自定义标记点上方的气泡窗口,类型Object,不是必填 - 可识别换行符
label,为标记点旁边增加标签,类型Object,不是必填 - 可识别换行符
anchor,经纬度在标注图标的锚点,默认底边中点,不是必填,{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: 5, y: 1} 表示底边中点
marker 上的气泡 callout(Object类型) marker数组 上属性 callout 对象使用属性:
content,文本,String
color,文本颜色,String
fontSize,文字大小,Number
borderRadius,callout边框圆角,Number
bgColor,背景色,String
padding,文本边缘留白,Number
display,'BYCLICK':点击显示; 'ALWAYS':常显,String
textAlign,文本对齐方式。有效值: left, right, center,String
marker 上的标签 label(Object类型)
content,文本,String
color,文本颜色,String
fontSize,文字大小,Number
x,label的坐标,原点是 marker 对应的经纬度,Number
y,label的坐标,原点是 marker 对应的经纬度,Number
borderWidth,边框宽度,Number
borderColor,边框颜色,String
borderRadius,边框圆角,Number
bgColor,背景色,String
padding,文本边缘留白,Number
textAlign,文本对齐方式。有效值: left, right, center,String
polyline polyline表示指定一系列坐标点,从数组第一项连线至最后一项
points,经纬度数组,类型为Array,必填,如:[{latitude: 0, longitude: 0}]
color,线的颜色,类型为String,不必填,如:#0000AA
width,线的宽度,类型为Number,不必填
dottedLine,是否虚线,类型为Boolean,不必填,默认值false
arrowLine,带箭头的线,类型为Boolean,不必填,默认值为false
arrowIconPath,更换箭头图标,类型为String,不必填,在arrowLine为true时,默认带箭头的线时生效
borderColor,线的边框颜色,类型为String,不必填
borderWidth,线的厚度,类型为Number,不必填
polygon polygon指定一系列坐标点,根据points坐标数据生成闭合多边形
points,经纬度数组,array,必填,如:[{latitude: 0, longitude: 0}]
strokeWidth,描边的宽度,Number,否
strokeColor 描边的颜色,String,否
fillColor,填充颜色,String,否
zIndex,设置多边形 Z 轴数值,Number,否
circles circles在地图上显示圆
latitude,纬度,Number,必填,浮点数,范围 -90 ~ 90
longitude,经度,Number,必填,浮点数,范围-180 ~ 180
color,描边的颜色,String,不必填,如:#0000AA
fillColor,填充颜色,String,不必填,如:#0000AA
radius,半径,Number,必填
strokeWidth,描边的宽度,Number,不必填
controls controls在地图上显示控件,控件不随着地图移动
id,控件id,Number,不必填,在控件点击事件回调会返回此id
position,控件在地图的位置,Object,必填,控件相对地图位置
iconPath,显示的图标,String,必填,项目目录下的路径,支持相对路径写法,以'/'开头则表示相对项目根目录;也支持临时路径
clickable,是否可点击,Boolean,不必填,默认不可点击
position
left,距离地图的左边界多远,Number,不必填,默认为0
top,距离地图的上边界多远,Number,不必填,默认为0
width,控件宽度,Number,不必填,默认为宽度
height,控件高度,Number,不必填,默认为高度
注意在uniapp中地图组件的经纬度必填,如果不填,经纬度则默认值是北京的经纬度。 2uniapp使用map组件 基本使用方法 使用uniapp开发中的map组件,基本使用方法:
代码如下(示例):
<map :scale="scale" style="width: 100%; height: 100%;"
enable-3D="false" show-compass="false" enable-overlooking="false"
:enable-satellite="false" :enable-traffic="false" show-location="false"
:latitude="latitude" :longitude="longitude" :markers="covers">
</map>
markers属性的使用,代码如下(示例):
markers: [{
id: 1, // Number
title: '1', // String-标注点名
rotate: 180, // Number - 顺时针旋转的角度,范围 0 ~ 360,默认为 0
alpha: 05, // 默认1,无透明,范围 0 ~ 1
latitude: 39899,
longitude: 11639742,
width: 30,
height: 30,
// callout: {
// display: "BYCLICK",
// padding: 10,
// borderRadius: 5,
// content: '',
// },
// anchor: {},
iconPath: '///static/locationpng', // 显示的图标
}, {
id: 2,
title: '2', // String
latitude: 3990,
longitude: 11639,
callout: {
color: '#007AFF', // 文本颜色
bgColor: '#563BFF', // 背景色
display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
fontSize: 15,
textAlign: 'left', // 文本对齐方式。有效值: left, right, center
padding: 10, // 文本边缘留白
borderRadius: 5,
content: '腾讯地图',
},
label: {
content: 'Jeskson',
color: '#000000',
fontSize: 12,
borderWidth: 12,
borderColor: '#007AFF',
borderRadius: 5,
padding: 5,
textAlign: 'center',
bgColor: '#563BFF',
},
iconPath: '///static/locationpng'
}]
以上就是关于微信小程序this.setData is not a function报错怎么解决全部的内容,包括:微信小程序this.setData is not a function报错怎么解决、微信小程序能使用海外版的地图开发应用吗、uniapp地图api不全等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)