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

原创

已于 2023-10-08 10:36:54 修改 · 7.1k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2023-04-12 14:15:33 首次发布

该文章展示了如何在uniapp中使用map组件来创建自定义的标记点图标和内容文字。通过设置markers属性和customCallout，可以实现地图上的个性化标注，并通过v-for循环动态渲染多个标记点。同时，文章提供了具体的代码示例，包括数据结构和样式设计，以显示轨迹地图、信息统计等详细信息。

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

最低0.47元/天解锁文章