map组件中用polyline字段渲染多点组成的线数据，android手机渲染出来的线有毛刺不平滑？
问题描述： 使用微信小程序官方的map组件，用polyline字段来渲染由多个点组成的线数据，同样的数据，ios手机是正常的很平滑，安卓手机渲染出来的线很多毛刺且歪歪扭扭，请问怎么解决才能像ios一样正常。 代码片段： https://developers.weixin.qq.com/s/4du6z8mN7EF9 现象： 1 点M（31.026408616381445，121.448515260907229），点N（31.026694035988626，121.448382519899809），以M、N为端点，等分为150个点，作为polyline的点数据数组，渲染出来的线数据预期是一条笔直的直线，ios手机确实是笔直平滑的，但使用android手机渲染出来的是歪歪扭扭很多毛刺 2 将M、N向右平移到A、B，这个不做打断，作为polyline的points数据，这种情况ios和android手机都是平滑的了 渲染效果如图：（左边的线是多点数据的线，右边的线是只有两个端点的线） android手机（Redmi手机，MIUI12.0.5，android版本10 ）（注，截图是用这个截取的，但该现象不仅限于这个手机，其它品牌诸如Huawei/Oppo/Honor都有试过，也存在该现象） [图片] ios手机效果 （iPhone13，系统：15.6.1） [图片] 代码逻辑： wxml <map id="map" longitude="{{center.longitude}}" latitude="{{center.latitude}}" scale="{{scale}}" circles="{{parkinglotCircles}}" polyline="{{parkinglotLines}}" polygons="{{parkinglotPolygons}}" markers = "{{markers}}">
</map>
wxss #map{
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
js const app = getApp()
Page({
data: {
center: {
latitude: 31.026484964647693,
longitude: 121.448673014784962
},
scale: 22,
parkinglotCircles: [],
parkinglotLines: [],
parkinglotPolygons: [],
markers: []
},
onLoad() {
console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
var tempParkinglotLines = []
// count = 分段数量 = 打断的点数量 - 1
// var count = 1
var count = 149
var startLat = 31.026408616381445
var endLat = 31.026694035988626
var deltaLat = (endLat - startLat) / count
var startLng = 121.448515260907229
var endLng = 121.448382519899809
var deltaLng = (endLng - startLng) / count
var splitPoints = []
for (let i = 0; i < count + 1; i++) {
var point = {
latitude: startLat + deltaLat * i,
longitude: startLng + deltaLng * i
}
splitPoints.push(point)
}
console.log(splitPoints)
var splitPointsLine = {
points: splitPoints,
color: "#51A4FF",
width: 3,
dottedLine: false, // 是否是虚线
arrowLine: false,
arrowIconPath: '', // 可以用图片替换默认箭头样式
borderWidth: 1,
borderColor: "#0073FB", // 边界线的颜色
}
tempParkinglotLines.push(splitPointsLine)
var notSplitPoints = []
var pointA = {
latitude: 31.026508616381445,
longitude: 121.448615260907229
}
var pointB = {
latitude: 31.026794035988626,
longitude: 121.448482519899809
}
notSplitPoints.push(pointA)
notSplitPoints.push(pointB)
var notSplitPointsLine = {
points: notSplitPoints,
color: "#51A4FF",
width: 3,
dottedLine: false, // 是否是虚线
arrowLine: false,
arrowIconPath: '', // 可以用图片替换默认箭头样式
borderWidth: 1,
borderColor: "#0073FB", // 边界线的颜色
}
tempParkinglotLines.push(notSplitPointsLine)
this.setData({
parkinglotLines: tempParkinglotLines
})
}
})
如题，请问有多个点构成的线数据，怎么实现在android手机平滑渲染，与ios一致 @官方 https://developers.weixin.qq.com/miniprogram/dev/component/map.html
