mapcontext.smoothdrawpolyline(object object)
基础库 或更高版本； 且 支付宝客户端 10.3.86 或更高版本； 若版本较低，建议采取 兼容处理 。
小程序开发者工具： 不支持。
主体： 企业支付宝小程序 、 个人支付宝小程序
绘制折线，产生轨迹动画。
折线绘制完成时会触发 onpolylinemoveend 事件。可以通过 map 组件注册其回调函数，如：
object object
查看示例
| 属性 | 类型 | 默认值 | 必填 | 描述 | |||||
|---|---|---|---|---|---|---|---|---|---|
| polylineid | number | - | 是 | 折线 id。当 action 为 'start' 时，每次调用请使用不同的 polylineid |
|||||
| points | array | - | 是 | 经纬度数组，确定绘制的折线。数组长度不得小于 2 |
|||||
|
|||||||||
| duration | number | 5000 | 否 | 绘制的时间，单位毫秒 |
|||||
| color | string | #000000 | 否 | 折线颜色。支持十六进制颜色值 |
|||||
| width | number | 10 | 否 | 折线宽度，单位 dp |
|||||
| dottedline | boolean | false | 否 | 是否设置虚线 |
|||||
| iconpath | string | - | 否 | 设置折线纹理的图标路径。支持网络地址及本地文件，不支持 gif 文件格式。iconpath 引用图片宽高需要为 2 的整数次幂 |
|||||
| iconwidth | number | - | 否 | 折线纹理宽度，单位 dp。设置 iconpath 后生效 |
|||||
| colorlist | array |
- | 否 | 折线的各段颜色。数组长度应为 points.length - 1，否则剩余折线段颜色取数组最后一位。例：colorlist:['#ff0000'] 。ios 上暂不支持 colorlist 功能 |
|||||
| success | function | - | 否 | 调用成功的回调函数 |
|||||
| fail | function | - | 否 | 调用失败的回调函数 |
|||||
| complete | function | - | 否 | 调用结束的回调函数（调用成功、失败都会执行） |
fail 回调的参数为 object，error 属性为错误码，errormessage 属性为错误消息。
| 错误码 | 错误消息 | 凯发app官方网站的解决方案 |
|---|---|---|
| 2 | 参数错误 |
points 数组长度需要大于 1 |
| 10001 | 未指定polylineid |
请传入有效的 polylineid 值 |
<view>
<map
id="map"
longitude="120.125872"
latitude="30.272960"
onpolylinemoveend="onpolylinemoveend"
style="width: 100%; height: 200px;"
/>
<view ontap="smoothdrawpolyline">绘制折线</view>
</view>
page({
data: {
mapctx: null
},
onready() {
this.data.mapctx = my.createmapcontext('map');
},
smoothdrawpolyline() {
const anipoints = [
{
latitude: 30.272960,
longitude: 120.125872,
}, {
latitude: 30.272960,
longitude: 120.124572,
},
{
latitude: 30.274260,
longitude: 120.124572,
},
{
latitude: 30.274260,
longitude: 120.126572,
},
{
latitude: 30.276260,
longitude: 120.126572,
},
{
latitude: 30.276260,
longitude: 120.127272,
},
{
latitude: 30.276560,
longitude: 120.127272,
},
{
latitude: 30.276860,
longitude: 120.129872,
}
];
this.data.mapctx.smoothdrawpolyline({
// 折线 id
polylineid: 10,
// 经纬度数组，指定绘制路径
points: anipoints,
// 线路颜色
color: '#00ff00',
// 是否虚线
dottedline: false,
// 动画执行时间
duration: 4000,
success: res => {
console.log('success' json.stringify(res))
},
fail: err => {
console.log('err' json.stringify(err))
}
});
},
onpolylinemoveend(res) {
console.log('onpolylinemoveend: ' json.stringify(res));
},
});
-
tippolylineid 在 android 上实际不是必填项，但 ios 上必填。请确保传入正确的 polylineid 以保证兼容。
-
tipandroid 上使用 mapcontext.smoothdrawpolyline 只支持同时绘制一个折线动画（api 调用时，之前正在进行的动画会立即结束），为保证效果，建议等前一个动画结束后再进行下一次调用。
q：在地图上使用 mapcontext.smoothdrawpolyline 生成的轨迹为什么无法使用 clearroute 清除？
clearroute 只能用于清除地图上的导航路线（route），smoothdrawpolyline 产生的轨迹是折线（polyline），需要使用 mapcontext.updatecomponents 设置：
this.mapctx = my.createmapcontext('map');
// 清除地图上所有折线
this.mapctx.updatecomponents({ polyline:[] })
// 地图只显示一条折线 (由 anipoints 定义）
this.mapctx.updatecomponents({
polyline: [{
points: anipoints,
color: '#0000ff',
width: 10,
}],
})