vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示

javascript 复制代码

1. 使用uniapp 提供的map组件作为承载页面
 <map
        id="store-order-map"
        :polyline="polyline"
        :markers="markers"
        :include-points="includePoints"
        :scale="10"
      ></map>

javascript 复制代码

 data() {
    return {
      mapCtx: null
      }
   }

javascript 复制代码

 mounted() {
    this.mapCtx = uni.createMapContext('store-order-map', this)
  },

javascript 复制代码

获取路径方法
  fetchRoutePolyline(options) {
      const { start, end, waypoints } = options
      const defaultOptions = {
        key: '你的key',
        origin: start,
        destination: end,
        waypoints: waypoints,
        strategy: 0,
        show_fields: 'tmcs,polyline'
      }
      return new Promise((resolve, reject) => {
        uni.request({
          url: 'https://restapi.amap.com/v3/direction/driving',
          data: defaultOptions,
          success: (res) => {
            resolve(res.data)
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    },

javascript 复制代码

 生成路径方法
async getPolyline() {
      const { dc_lon, dc_main, stop_lon, stop_main } = this.info
      const start = `${dc_lon},${dc_main}`
      const end = `${stop_lon},${stop_main}`
      const waypoints = []
      try {
        const polylineData1 = await this.fetchRoutePolyline({
          start,
          end,
          waypoints
        })
        const polyline1 = this.generatePolyline(polylineData1, '#67c23a')
        this.polyline = [polyline1]
      } catch (error) {
        uni.showToast({
          title: error.message || '获取路径失败',
          icon: 'none',
          duration: 2000
        })
      }
    }
    generatePolyline(data, color = '#1684fc') {
      const { route } = data
      if (!route) {
        return []
      }
      const path = route.paths[0]
      const steps = path.steps
      const result = []
      steps.forEach((step) => {
        const a = step.polyline.split(';')
        a.forEach((item) => {
          const b = item.split(',')
          const c = {
            longitude: parseFloat(b[0]),
            latitude: parseFloat(b[1])
          }
          result.push(c)
        })
      })
      const line = {
        points: result,
        color,
        width: 6
      }
      return line
    },

javascript 复制代码

创建marker
  createMarkers() {
      const { dc_lon, dc_main, stop_lon, stop_main, car_lat, car_lon } =
        this.info
      const startMarker = {
        id: 1,
        longitude: parseFloat(dc_lon),
        latitude: parseFloat(dc_main),
        iconPath: '/static/icon/xx.png',
        width: 24,
        height: 24
      }
      const endMarker = {
        id: 2,
        longitude: parseFloat(stop_lon),
        latitude: parseFloat(stop_main),
        iconPath: '/static/icon/xxx.png',
        width: 24,
        height: 24
      }
      const carMarker = {
        id: 3,
        longitude: parseFloat(car_lon),
        latitude: parseFloat(car_lat),
        iconPath: '在线地址',
        width: 15,
        height: 24
      }
      this.markers = [startMarker, carMarker, endMarker]
    },