1、问题:微信小程序中使用map组件中的polyline属性划线,发现编译器和苹果机型都显示,只有奇葩的安卓能看到,后来看了文档才发现polyline数组中的一个color属性的表达需要写成16进制(这种情况根本就无法想象到问题会出在这,整得自己只能看文档说明),起初还以为map是原生组件,层级为最高,不能被覆盖,整得自己陷在思维误区里,最关键的是这尼玛是之前同事的代码,让我维护。气不打一处,想拉他回来打一顿...
2、初始问题代码
var polyline = [{
points: temp,
color: "red",
width: 2,
dottedLine: true
}];
3、微信文档地址,图片如下:
4、改回后编译器里的效果,苹果也没问题的,这里只上编译器的效果
5、自己测试代码
wxml代码
<!--pages/map/map.wxml-->
<map class="navi_map" longitude="102.67484140406796" latitude="25.03682953251695" scale="100" include-points='{{points}}' polyline="{{polyline}}" ></map>
wxss代码
/* pages/map/map.wxss */
.navi_map{
width: 100%;
height: 667px;
}
js代码
// pages/map/map.js
Page({
/**
* 页面的初始数据
*/
data: {
longitude: '',
latitude:'',
points: [],
polyline: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var lat = 25.03682953251695, lng = 102.67484140406796;
var temp = [{
latitude: 25.03682953251695,
longitude: 102.67484140406796
},
{
latitude: 25.036132223872958,
longitude: 102.67386832053477
},
{
latitude: 25.035328234772695,
longitude: 102.67441722093537
},
{
latitude: 25.03587706184719,
longitude: 102.67548958617391
},
{
latitude: 25.03682953251695,
longitude: 102.67484140406796
},
]
var polyline = [{
points: temp,
color: "#ff0000",
width: 2,
dottedLine: true
}];
this.setData({
longitude:lng,
latitude:lat,
polyline:polyline,
points:temp
})
},
})