微信小程序中使用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代码

<!--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
    })
  },
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,511评论 0 17
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 4,773评论 0 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,161评论 0 21
  • 今天看到一段文字回想起,一个人安静的日子,安静意味着孤独寂寞,对于现在的我是两个极限状态,最冷和最热的极点,哈哈…...
    吃乳酪的水母阅读 303评论 1 1