uni-app——map组件路线[polyline]功能示例

叁歲伎倆 2022-10-16 04:56 249阅读 0赞

# Demo #

<template>
      <view class="img_box">
        <map :latitude="latitude" :longitude="longitude" scale="18" :polyline="polyline"></map>
      </view>
    </template>
    
    <script> // 数据加载API import { stuExerciseRecordDetail } from '@/api/sports.js' export default { data() { return { runid: -1, latitude: 39.96491, longitude: 116.31604, polyline: [{ points: [], color: "#31c27c", width: 10, arrowLine: true, borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 }] }; }, mounted() { if (this.runid != -1) { stuExerciseRecordDetail(this.runid).then((data) => { this.latitude = data[0][1] this.longitude = data[0][0] let points = [] data.forEach(item => { points.push({ latitude: item[1], longitude: item[0] }) }) this.polyline = [{ points: points, color: "#31c27c", width: 10, arrowLine: true, borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 }] }) } }, onLoad: function(option) { this.runid = option.runid } } </script>
    
    <style lang="scss"> .img_box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; map { width: 100%; height: 100%; } } </style>

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]: /images/20221014/bf574c60e15b400dbaeccc392a9018a5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet使用Polyline画多段折线（示例代码015）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第015个 [点击查看专栏目录][Link 1]

港控/mmm°/ 2024年04月07日 15:58/ 0 赞/ 45 阅读

相关 uni-app——map组件路线[polyline]功能示例

Demo <template> <view class="img_box"> <map :latitude="latitude" :l

叁歲伎倆/ 2022年10月16日 04:56/ 0 赞/ 250 阅读

相关 Swing组件按功能分类

顶层容器：JFrame、JApplet、JDialog、JWindow。中间容器：JPanel、JScrollPane、JSplitPane、JToolBar等。

素颜马尾好姑娘i/ 2022年07月14日 03:53/ 0 赞/ 162 阅读

相关 c#调用office组件示例

using System; using System.Collections.Generic; using System.Linq; using System.Te

约定不等于承诺〃/ 2022年07月12日 12:06/ 0 赞/ 254 阅读

相关 VTK polyline

include <vtkVersion.h> include <vtkSmartPointer.h> include <vtkCellArray.h>

小鱼儿/ 2022年06月13日 12:11/ 0 赞/ 159 阅读

相关 vue组件： todolist功能开发，todolist组件拆分，todoLidt删除

通过todolist案例学习vue中组件的概念和使用‘ 1、 todolist功能开发使用v-model、v-on（@）、v-for指令实现todolist功能实例：

秒速五厘米/ 2022年05月15日 06:59/ 0 赞/ 213 阅读

相关扩展 LayUI 步骤条组件，示例演示

扩展 LayUI 步骤条组件，示例演示操作演示： ![在这里插入图片描述][20190410092802823.gif] 代码简介：优点：使用扩展

青旅半醒/ 2022年02月21日 00:20/ 0 赞/ 1009 阅读

相关 Form组件之常用标签示例

![1675801-20190715144306360-1323198767.png][]![1675801-20190715144309773-661075890.png][

迷南。/ 2021年11月29日 06:20/ 0 赞/ 217 阅读

相关 Android组件化架构实践，学习路线+知识点梳理

前言本人今年25岁，毕业之后进入一家小型的互联网公司工作，在这原公司呆了3年，直至今年才有了跳槽的想法。每个程序员都拥有大厂梦，我也不例外，在小公司待久了，感觉人

青旅半醒/ 2021年07月20日 19:26/ 0 赞/ 382 阅读

相关手写springboot starter组件示例

Spring Boot 特性： 1.能够快速创建基于Spring的应用程序； 2.能供直接使用java main 方法启动内置的Tomcat或者Jetty服务器运行Spr...

你的名字/ 2021年03月11日 13:55/ 0 赞/ 620 阅读