uniapp polyline

uniapp是一种基于Vue.js的跨平台开发框架，可以用于开发iOS、Android和Web应用程序。polyline是uniapp中的一个组件，用于在地图上绘制折线。

polyline组件可以通过传入一组经纬度坐标来绘制折线。你可以设置折线的样式、颜色、宽度等属性。同时，你还可以通过设置事件监听来实现对折线的交互操作，比如点击、拖拽等。

以下是polyline组件的一些常用属性：
- points：折线的经纬度坐标数组。
- color：折线的颜色。
- width：折线的宽度。
- dottedLine：是否绘制虚线。
- arrowLine：是否绘制箭头。
- borderColor：折线边框的颜色。
- borderWidth：折线边框的宽度。

你可以根据自己的需求来配置polyline组件，实现地图上的折线展示和交互效果。

相关问题

uniapp地图路线轨迹

要在uniapp中显示地图路线轨迹，可以使用uniapp的插件uView提供的uView-uniapp插件中的uView-AMap组件。该组件集成高德地图SDK，可以方便地使用高德地图的API。

在使用uView-AMap组件时，可以使用其提供的polyline组件来绘制路线轨迹。需要先通过高德地图SDK获取到路线规划的坐标点，然后将这些坐标点传入polyline组件中进行绘制。

以下是一个简单的示例代码：

<template>
  <view>
    <u-view-amap :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"></u-view-amap>
  </view>
</template>

<script>
import uViewAMap from '@/uview-amap/uview-amap.vue'

export default {
  components: {
    uViewAMap
  },
  data () {
    return {
      longitude: 116.397428,
      latitude: 39.90923,
      markers: [
        {
          id: 1,
          longitude: 116.397428,
          latitude: 39.90923,
          title: 'Marker1'
        }
      ],
      polyline: {
        points: [
          {longitude: 116.397428, latitude: 39.90923},
          {longitude: 116.398258, latitude: 39.90864},
          {longitude: 116.398265, latitude: 39.907637}
        ],
        color: '#FF0000DD',
        width: 5,
        dottedLine: false
      }
    }
  }
}
</script>

uniapp地图轨迹回放

以下是uniapp地图轨迹回放的步骤和代码示例：

1.引入地图组件和工具类

<template>
  <view>
    <map :longitude="longitude" :latitude="latitude" :polyline="polyline" :include-points="true" :show-location="true" :markers="markers" style="width: 100%; height: 100%;"></map>
  </view>
</template>

<script>
import { wgs84togcj02 } from '@/utils/utils.js'

export default {
  data() {
    return {
      longitude: 0,
      latitude: 0,
      polyline: [],
      markers: []
    }
  },
  onLoad() {
    // 获取轨迹点数据
    const points = [
      { longitude: 116.397477, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 },
      { longitude: 116.397529, latitude: 39.908692 }
    ]
    // 将轨迹点数据转换为地图组件需要的格式
    const polyline = [{
      points: points.map(item => {
        const { longitude, latitude } = wgs84togcj02(item.longitude, item.latitude)
        return { longitude, latitude }
      }),
      color: '#0000FF',
      width: 10,
      borderWidth: 2,
      arrowLine: true
    }]
    // 将第一个点作为地图中心点
    const { longitude, latitude } = points[0]
    // 将轨迹点数据转换为地图组件需要的格式
    const markers = [{
      id: 1,
      longitude,
      latitude,
      iconPath: '/static/images/location.png',
      width: 30,
      height: 30
    }]
    this.longitude = longitude
    this.latitude = latitude
    this.polyline = polyline
    this.markers = markers
  }
}
</script>

2.在工具类中添加wgs84togcj02方法

/**
 * WGS84转GCJ02
 * @param {Number} lng 经度
 * @param {Number} lat 纬度
 * @returns {Object} GCJ02坐标系下的经纬度
 */
export function wgs84togcj02(lng, lat) {
  if (out_of_china(lng, lat)) {
    return { lng, lat }
  } else {
    let dlat = transformlat(lng - 105.0, lat - 35.0)
    let dlng = transformlng(lng - 105.0, lat - 35.0)
    let radlat = lat / 180.0 * PI
    let magic = Math.sin(radlat)
    magic = 1 - ee * magic * magic
    let sqrtmagic = Math.sqrt(magic)
    dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
    dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
    let mglat = lat + dlat
    let mglng = lng + dlng
    return { lng: mglng, lat: mglat }
  }
}

function transformlat(lng, lat) {
  let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
  ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
  return ret
}

function transformlng(lng, lat) {
  let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
  ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
  return ret
}

function out_of_china(lng, lat) {
  return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271
}