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

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>

效果

在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部