uniapp地图api不全

uniapp地图api不全,第1张

二、使用步骤

1.uniapp开发map说明

使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到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-表示点击标记点时触发,e.detail={markerId}

@labeltap-表示点击label时触发,e.detail = {markerId}

@callouttap-表示点击标记点对应的气泡时触发,e.detail = {markerId}

@controltap-表示点击控件时触发,e.detail = {controlId}

@regionchange-表示视野发生变化时触发

@tap-表示点击地图时触发App-nuve、微信小程序2.9支持返回经纬度

@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中地图组件的经纬度必填,如果不填,经纬度则默认值是北京的经纬度。 2.uniapp使用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: 0.5, // 默认1,无透明,范围 0 ~ 1

latitude: 39.899,

longitude: 116.39742,

width: 30,

height: 30,

// callout: {

// display: "BYCLICK",

// padding: 10,

// borderRadius: 5,

// content: '',

// },

// anchor: {},

iconPath: '../../../static/location.png', // 显示的图标

}, {

id: 2,

title: '2', // String

latitude: 39.90,

longitude: 116.39,

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/location.png'

}]

一、在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语。

二枯并、自己在开发时遇到的问题:

1.微信头像是网络图片,而地图的没纳迹markers中的iconPath只能使用本地图片

2.将网络图片缓存到本地,但是因为小程序的异步执行导致图片不能显示

三、解决办法:

1.解决微信头像是网络图片的问题,可以使用wx.downloadFile({})方法来将头像缓存到本地,然后再将本地路径赋给iconPath即可,第一个不能使用网络图片的问题解决。

2.异步请求导致本地缓存的图片不能在地图上显示,我的解决办法是,先通过request请求获取到祝福语茄宽后,用for循环赋值给markers,iconPath路径填写一个本地路径,同时调用一个方法,获取当前用户头像的本地缓存路径,获取成功后赋值给markers中每个对象的iconPath,所以一般来说,地图上的图片会有切换,首先显示的是本地的统一的图片,经过一段时间的请求后,图片一个个变为用户头像。

四、相关 *** 作代码

getBlessing: function(){

var that = this

var getUserPic = function (pic_url,i) {

let cachePath

if(pic_url==null || pic_url=='') return

wx.downloadFile({

url: pic_url,

success: (pathInfo) =>{

// pathInfo.path 这是下载成的缓存链接,模拟器marker有时不支持http开头,真机不影响,得去掉http:/

cachePath = pathInfo.tempFilePath.replace("http:/", '').replace("https:/", '')//真机中无需replace,都支持,

var mak = "markers[" + i +"].iconPath"

that.setData({

[mak]: cachePath

})

}

})

}

wx.request({

url: '你的后台请求地址',

method: 'POST',

success: function (res) {

var list = res.data.list

var tempArr = []

var includeArr = []

var item = {}

var includeItem = {}

for (var i = 0i <list.lengthi++) {

var pic = getUserPic(list[i].user.user_pic,i)

item = {

iconPath: '/images/icon/small-logo.png',

id: list[i].id,

latitude: list[i].latitude,

longitude: list[i].longitude,

width: 30,

height: 30,

alpha: 0.8,

callout: {

content: list[i].content,

color: '#FFFFFF',

fontSize: 10,

borderRadius: 10,

bgColor: '#F44336',

padding: 5,

display: 'BYCLICK',//'BYCLICK':点击显示'ALWAYS':常显

}

}

includeItem = {

latitude: list[i].latitude,

longitude: list[i].longitude,

}

tempArr.push(item)

includeArr.push(includeItem)

}

that.setData({

markers: tempArr,

includepoints: includeArr,

count: res.data.count

})

console.log(that.data.markers)

}

})

},

五、效果截图

小程序加速度计api一共就三个方法。

1、wx.onAccelerometerChange(CALLBACK) 监听加速度数据,频率:5次/秒,接口调用后会自动开始监听,每调用一次就会注册一个。

2、wx.startAccelerometer(OBJECT) 开始监听方法

坑来了。。。没错就是第三方法

3、wx.stopAccelerometer(OBJECT) 停止监听,这个方法是停止了监听,再晃动手机不会走回调方法了, 但是它并不移除监听

那么问题来了,在某个页面每调用一次第御厅清一个api它就会注册一个监听,第三个api并不能移除掉监听,导致你再次开启的时候就会有多个回调方法在同时进行。就会出现问题。那么怎么避免呢?

解决方法:在微信小程序启动的时候就调用监听方法,在回到方法中通过pages能够获取到当前的页面,在当前页面调用你想回调的镇前方法就好了。

onLaunch: function () {

    wx.onAccelerometerChange((e) =>{

       var pages = getCurrentPages()var currentPage = pages[pages.length - 1]

       if (currentPage.onAccelerometerChange) {

          currentPage.onAccelerometerChange(e)

       }

    })

}

之后就可以在当前页面中伏辩的onAccelerometerChange(e)方法做你想做的事情了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12490633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存