微信小程序中使用map组件中的polyline属性划线，出现编译器和苹果机型不显示，只有安卓显示！

1、问题：微信小程序中使用map组件中的polyline属性划线，发现编译器和苹果机型都显示，只有奇葩的安卓能看到，后来看了文档才发现polyline数组中的一个color属性的表达需要写成16进制(这种情况根本就无法想象到问题会出在这，整得自己只能看文档说明)，起初还以为map是原生组件，层级为最高，不能被覆盖，整得自己陷在思维误区里，最关键的是这尼玛是之前同事的代码，让我维护。气不打一处，想拉他回来打一顿...
2、初始问题代码

var polyline = [{
      points: temp,
      color: "red",
      width: 2,
      dottedLine: true
    }];

3、微信文档地址，图片如下：

1570778003(1).jpg

4、改回后编译器里的效果，苹果也没问题的，这里只上编译器的效果

image.png

5、自己测试代码
wxml代码

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
    })
  },
})