Demo

<template><view class="img_box"><map :latitude="latitude" :longitude="longitude" scale="18" :polyline="polyline"></map></view> </template><script> // 數(shù)據(jù)加載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 //線的邊框?qū)挾?#xff0c;還有很多參數(shù)，請看文檔 }]};},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 //線的邊框?qū)挾?#xff0c;還有很多參數(shù)，請看文檔 }]})}},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>

效果

總結(jié)

以上是生活随笔為你收集整理的uni-app——map组件路线[polyline]功能示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。