Demo

<template><view class="img_box"><map :latitude="latitude" :longitude="longitude" scale="18" :polyline="polyline"></map></view>
</template><script>
// 数据加载APIimport {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>

效果

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

uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
(二)01- DCloud平台 HTML5+ App开发——真机调试运行夜神模拟器运行HBuilderX中的html文件夜神模拟器运行App的基础功能示例-手机设备-分享功能-拍照功能
DCloud 平台 HTML5 + App 开发下载安装 HBuilderX 下载地址:https://www.dcloud.io/hbuilderx.html HBuilderX-使用步骤: 第一 ...
python共享内存通信mapofview_python map eval strPython socket模块实现的udp通信功能示例...
本文实例讲述了Python socket模块实现的udp通信功能.分享给大家供大家参考,具体如下: socket介绍 socket(简称套接字) 是进程间通信的一种方式,它与其他进程间通信的一个主要 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uniapp 使用map组件动态自定义标记点图标及内容文字
先看效果地图中的标记点可以动态变化自定义的图片与内容原理通过map组件中的 markers 属性设置标记点用于在地图上显示标记的位置 map组件所在uniapp官网位置:map-uni-a ...
微信小程序----map组件实现检索【定位位置】周边的POI
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显 ...

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

Demo

效果

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

最新文章

热门文章