uniapp实现轨迹polyline和标记点markers最终实现效果

uniapp 使用map组件，实现自定义标记点markers图标及内容文字

<template>
	<view>
		<!--顶部轨迹-->
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
			<view class="topbox">
				<view class="locusnum" :class="{'selectlocusnum' : rSelect.indexOf(value.id)!=-1}"
					v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(value.id)">
					{
  
  {value.name}}
				</view>
			</view>
		</scroll-view>

		<!--轨迹地图-->
		<view class="mapbox">
			<map class="mapstyle" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline">
				<cover-view slot="callout">
					<block v-for="(item, index) in customCalloutMarkerIds" :key="index">
						<cover-view class="customCallout" :marker-id="item">
							<cover-view class="content">
								{
  
  {markersinit[index].stationName}}
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
				<view class="map-floatA">共计3段轨迹</view>
				<view class="map-floatB">2022/09/28</view>
			</map>
		</view>

		<!--底部盒子-->
		<view class="bottomBox">
			<view class="oneTier">
				<view class="placeBox">
					<view class="twig">
						<view class="tag">起</view>
						<view class="taginfo">江门豪爵研发中心</view>
					</view>
					<view class="twig">
						<view class="tag">终</view>
						<view class="taginfo">席帽山森林公园</view>
					</view>
				</view>
				<view class="rideBox">
					<text class="ride-mileage">骑行里程/</text>
					<view class="ride-text">
						<text class="ride-textA">25.9</text>
						<text class="ride-textB">km</text>
					</view>
				</view>
			</view>

			<view class="num-storey">
				<view class="ride-numbox">
					<view class="ride-num numA">01：19：46</view>
					<view class="ride-name">骑行时长</view>
				</view