微信小程序 map polyline 连点成线 线路规划 demo

原创 已于 2023-12-03 21:52:05 修改 · 1.2w 阅读 · 41 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序 #校园导航

于 2020-01-21 12:02:35 首次发布
本文介绍如何利用微信小程序的定位功能解决学校周边快递点难找的问题，通过地图组件和自定义路径实现精准导航。同时，推荐一款简洁的记账应用——熊猫小账本，支持iCloud同步、分类记账、统计图表等功能。

微信小程序官方文档

学校部分快递点（中通，百世…）位于校外，所以找寻比较困难

微信小程序+定位解决这个问题特别合适

上 demo


<map id="mapp" latitude="37.488" longitude="121.4499" scale="16" 
	 show-compass="true"show-scale="true" 	
	 polyline="{
    
    {polyline}}">
</map
最低0.47元/天 解锁文章
uniapp微信小程序：腾讯地图路线规划+导航(起点/重点)+路程距离+路程所需时间等，uniapp腾讯地图实现路线规划，导航，获取路程距离及时间（线路规划，导航及距离计算，自定义展示数据，详细源码）
高级前端工程师
09-10 3710
uniapp微信小程序内置腾讯地图，实现线路规划,导航及距离计算（带demo）uniApp实现路线规划+导航，获取路程距离及时间，获取当前位置到目的地的路线规划，小程序腾讯地图路线规划,计算长度以及行驶时间_自定义路线算时间，Uniapp小程序当中使用腾讯位置路线规划，微信小程序使用map组件实现路线规划功能示例，微信小程序实现地图路线规划，UNI-APP微信小程序路线规划导航，选择起点和终点路线规划，uniapp打开内置地图，实现线路规划及导航，自定义路线算时间，uniapp地图两点规划路线插件，腾讯地图
微信小程序----map路线规划
liNewman的博客
02-01 2170
微信小程序----map路线规划 声明 bug： 页面脚的步行、骑行、驾车区域在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_est...
微信小程序polyline
flyestcoder的博客
11-06 5574
微信小程序polyline踩坑 最近在做微信小程序项目，有个需求为实现轨迹路线。官方文档一看，嗯，要用polyline，马上写个demo，很简单嘛，代码如下：` // 初始数据 data: { polyline: [{ points: [{ latitude: "31.79453053831718", longitude: "120.02379165275012" }, { latitude: "31.7920170
手把手教你，如何在小程序上面画地图的polyline
weixin_46095200的博客
10-22 9866
最终效果 做这个之前需要很多前戏，比如申请腾讯地图key和用户定位、引入qqmap-wx-jssdk.js等 这些小儿科前戏就不在这里说了，主要说一下怎么划线的 第一步建好对应文件之后，引入Map插件 对地图进行绑定ID和设置宽高 id很有用的比如点击某个按钮回到当前定位，通过moveToLocation什么的 对地图的参数进行赋值 setting、markers、polyline、longitude、latitude 等 具体介绍请点击查看 微信开放文档 这里重点介绍 polyline
小程序地图使用markers显示两个坐标点，并连线
weixin_44217710的博客
04-20 2238
使用小程序组件 wxml 代码 <map id="mapId" zIndex="10" polyline="{{polyline}}" markers="{{markers}}" scale="16" style="width: 100%; height:100vh;" latitude="{{latitude}}" longitude="{{longitude}}"> <cover-view class="cover-view"> </c.
微信小程序地图polyline坐标太多异常显示BUG
qq_33982898的博客
04-19 1442
微信小程序map地图上显示polyline线，点位超过1250个出现bug，（仅真机上出现，模拟器上正常）
微信小程序map中polyline的坑
Manong
08-18 3444
微信小程序map中polyline的坑polylinepolyline层级 polyline 如果大家写过小程序的map地图应该就知道polyline的功效，说白了就是画线的，我在自己的项目中主要是用它来做轨迹回放的，我那地图上有两条线，第一条就是默认的路线，第二条就是行驶过后的要变颜色的线，然后，我按照文档敲的代码，却一直在给我报错，抓狂了很久。 就是报这样的错误，我相信如果踩到这坑的人肯定不止我一个，因为现在项目上的轨迹回放都是后台传gps定位给前端，一个点一个点的渲染，如果你的项目就是这样的，那
微信小程序 腾讯地图 驾车路线规划demo
克里斯蒂亚诺更新的博客
02-20 235
【代码】微信小程序 腾讯地图 驾车路线规划demo。
微信小程序实现轨迹回放的示例代码
12-30
在微信小程序实现轨迹回放的效果 1、wxml <map id=map longitude={{longitude}} latitude={{latitude}} scale=16 bindcontroltap=controltap bindmarkertap=markertap markers={{markers}} polyline={{polyline}}...
微信小程序地图map的markers属性polyline属性controls属性全解析教程
coldriversnow的专栏
11-20 1242
【代码】微信小程序地图map的markers属性polyline属性controls属性全解析教程。
uniapp微信小程序地图实现绘制polygon（保姆级教程 全网最全！！！）
逆水行舟 不进则退
12-01 6389
uniapp微信小程序中在map上实现polygon的绘制。全网最全保姆级教程，不会你来砸我！！！
微信小程序实现地图路线规划
m0_65377849的博客
11-27 2460
【代码】微信小程序实现地图路线规划。
微信小程序多点定位marker标点polyline连线
12-17 2307
【代码】微信小程序多点定位marker标点polyline连线。
微信小程序地图map
最新发布
2501_92846527的博客
07-29 649
content: '预计2天到达',...beijing, // 小车位置。// 标记点（包含城市和小车）// 虚拟点（扩展视野）
小程序基本命令
aiven1637的博客
10-30 3468
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示
weixin_44185995的博客
02-18 655
【代码】vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示。
微信小程序中Map地图组件的使用
xyphf的博客
05-06 8680
常用功能一：绘制地图标记点一个或多个 map.wxml <!-- longitude 经度 latitude 纬度 scale 缩放层级 最小5，最大18 markers 地图标记 bindmarkertap 点击markers时的事件 polyline="{{polyline}}" 绘制多边形 style --> <map id="map" long...
微信小程序：点marker，线polyline，面polygons的渲染
Crazy_GirlLL的博客
12-11 3942
WXML： JS： 其中：线polyline，和面polygons的数据是这样的： 一个js文件，然后里面是经纬度，只不过在引用之后又做了处理 重要提示：我不知道后面渲染线和面的时候，电脑端就是微信开发者工具上面是如何显示试图的，我现在只显示了点和线，面缺不显示，不清楚原因，在手机上预览的时候，就可以看到面了 电脑上是：手机上是：所以，就这样啦~~~ ...
小程序polyline样式分段
weixin_45871686的博客
12-29 576
一、问题描述： 如在选择公交路线（包含步行和公交）时，怎么才能让不同路线显示不同的颜色？ 或者在路线导航中，已经行驶过的路线段用一种路线样式，未行驶的路线用另一种样式？
微信小程序map polyline不显示
03-29
<think>嗯，用户问的是微信小程序中map组件的polyline线条不显示的问题。首先，我得回忆一下常见的polyline不显示的原因。可能的问题点有几个方面：数据格式是否正确、属性设置有没有遗漏、样式问题，或者平台兼容性之类的。 首先，检查数据格式是否正确。根据微信小程序的文档，polyline需要是一个数组，每个元素包含points、color、width等属性。points必须是数组，里面每个元素是经纬度对象，比如{latitude: ..., longitude: ...}。用户可能在这里犯了错误，比如直接用了字符串或者坐标顺序搞反了。比如说，有没有可能用户把经纬度的顺序写成了longitude在前，latitude在后？或者points数组里没有正确构建对象？ 然后，确认必填属性是否齐全。points、color、width都是必填的，color可能需要用十六进制或者rgba格式。如果用户只写了颜色名称，比如"red"，可能在小程序里不被支持，导致不显示。这时候应该建议用户检查颜色值是否正确，比如用#FF0000或者rgba(255,0,0,1)。 接下来，坐标范围的问题。latitude应该在-90到90之间，longitude在-180到180之间。如果数据超出范围，可能不会显示。用户的数据源是否有问题？比如从某个API获取的数据有没有错误的坐标值？ 还有，地图组件的宽高是否设置正确。如果map组件的宽度或高度为0，当然什么都显示不了。需要建议用户检查CSS，确保map组件有实际的尺寸，比如设置style="width: 100%; height: 300px;"。 然后，考虑平台差异。特别是用户提到在安卓端不生效，可能和iOS的表现不同。需要检查是否有平台特定的问题，比如某些属性在安卓上不支持，或者需要额外的配置。比如，是否需要开启特定权限，或者是否有已知的安卓端bug？ 另外，参考用户提供的引用，尤其是引用[1]提到在uniapp和微信社区提过bug但未解决，可能这个问题涉及更深层的兼容性问题。可能需要建议用户尝试使用腾讯位置服务的解决方案（引用[2]），或者检查是否有第三方地图服务如天地图的集成问题（引用[3]），但这里用户的问题是关于polyline，可能和第三方服务无关，主要还是配置问题。 还有，可以建议用户开启调试模式，查看控制台是否有报错信息，比如坐标格式错误或缺少属性。此外，建议用户简化代码，做一个最小化测试用例，排除其他代码的干扰，确认是否是代码其他部分的影响。 最后，如果以上方法都无效，可能需要建议用户检查微信小程序的版本，或者尝试重新安装开发工具，确保没有缓存或版本问题。同时，查看微信官方社区的类似问题，看看有没有临时解决方案或官方回复。</think>### 微信小程序 map polyline 不显示 解决方案 #### 1. 检查数据格式是否正确 - **问题原因**：`polyline`的`points`参数必须是由经纬度对象构成的数组，且格式需严格遵循微信小程序API规范。 - **解决方案**： ```javascript polyline: [{ points: [ {latitude: 39.90469, longitude: 116.40717}, // 正确格式 {latitude: 31.23037, longitude: 121.47370} ], color: "#FF0000", // 必须为十六进制或rgba格式 width: 5, // 必须显式定义 arrowLine: false // 非必填但需注意类型 }] ``` 若使用字符串或数值数组（如`[116.40717, 39.90469]`）会导致不显示[^1]。 #### 2. 确认必填属性是否齐全 - **关键属性**：`points`、`color`、`width`为必填项，缺一不可。 ```javascript // 错误示例：缺少width或color polyline: [{ points: [{latitude: 30.0, longitude: 120.0}] }] ``` #### 3. 验证坐标范围 - **限制条件**：纬度（`latitude`）需在`-90~90`，经度（`longitude`）需在`-180~180`。若数据源来自第三方（如GPS设备或API），需添加范围校验： ```javascript function validateCoordinate(lat, lng) { return Math.abs(lat) <= 90 && Math.abs(lng) <= 180; } ``` #### 4. 检查地图组件宽高 - **常见问题**：若未显式设置`map`组件的宽高，可能导致渲染区域为0。 ```html <!-- 正确示例 --> <map style="width: 100%; height: 300px;"></map> ``` #### 5. 安卓端兼容性处理 - **特殊场景**：部分安卓机型可能因GPU渲染模式导致线条不显示。可尝试以下方案： - 调整`color`透明度（如`rgba(255,0,0,0.8)`）[^1]。 - 降低`width`值（如从`10`改为`5`）。 #### 6. 使用腾讯位置服务增强方案 若问题仍未解决，可参考腾讯位置服务的《微信小程序解决方案》： - 集成**个性化地图样式**以适配复杂场景[^2]。 - 调用**地图SDK**的`drawPolylines`方法替代原生组件： ```javascript const qqmapsdk = new qq.maps.Map(); qqmapsdk.drawPolylines({ path: [[116.40717, 39.90469], [121.47370, 31.23037]], strokeColor: '#FF0000' }); ``` #### 附：调试步骤 1. 开启微信开发者工具的**调试模式**，检查控制台是否有`Invalid polyline data`警告。 2. 通过`console.log(JSON.stringify(polyline))`输出数据，验证格式是否符合要求。
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值