uniapp map组件 polyline属性的使用

在map组件中有这样的一条属性

就是在地图上画出线的轨迹

这是他的属性说名,具体使用则是先在地图组件中引用

在data中写数据

polyline:[
					{
					points:[
						{
							longitude: 86.053901, // 經度
							latitude: 44.312554, // 緯度
						},
						{
							longitude: 86.053922, // 經度
							latitude: 44.310168, // 緯度
						},
						{
							longitude: 86.055683, // 經度
							latitude: 44.310123, // 緯度
						},
						{
							longitude: 86.05583, // 經度
							latitude: 44.312389, // 緯度
						}
					],
					color: "#33c9FFDD",
					width: 3,
					dottedLine: false
				},
				],//地图中的线

就会绘制出想要的线条

  • 16
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Uniappmap组件可以通过计算两个标记之间的距离来显示它们之间的距离。可以使用Haversine公式来计算两个地理位置之间的距离,该公式可以计算出两个经纬度之间的距离。以下是一个示例代码,可以根据需要进行修改: ```html <template> <view> <map :polyline="polyline" :markers="markers"></map> <view>{{distance}} km</view> </view> </template> <script> export default { data() { return { polyline: [], markers: [{ id: 1, latitude: 39.90469, longitude: 116.40717, label: { content: '北京市', color: '#FF0000', fontSize: 16, borderRadius: 10, bgColor: '#FFFFFF', padding: 5 } }, { id: 2, latitude: 31.23037, longitude: 121.4737, label: { content: '上海市', color: '#FF0000', fontSize: 16, borderRadius: 10, bgColor: '#FFFFFF', padding: 5 } }], distance: '' } }, methods: { getDistance(lat1, lng1, lat2, lng2) { const radLat1 = lat1 * Math.PI / 180.0; const radLat2 = lat2 * Math.PI / 180.0; const a = radLat1 - radLat2; const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0; let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * 6378.137; s = Math.round(s * 10000) / 10000; return s.toFixed(2); }, updateDistance() { const marker1 = this.markers[0]; const marker2 = this.markers[1]; this.distance = this.getDistance(marker1.latitude, marker1.longitude, marker2.latitude, marker2.longitude); } }, mounted() { this.polyline = [{ points: [{ latitude: this.markers[0].latitude, longitude: this.markers[0].longitude }, { latitude: this.markers[1].latitude, longitude: this.markers[1].longitude }], color: "#FF0000DD", width: 2, dottedLine: true }]; this.updateDistance(); } } </script> ``` 在上面的代码中,我们使用了getDistance方法来计算两个标记之间的距离,并在页面上显示它。我们还使用polyline属性来绘制标记之间的连线,并使用markers属性来设置标记的位置和标注信息。在mounted方法中,我们初始化了polyline和distance,并调用了updateDistance方法来计算并显示距离。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值