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]
    },
相关推荐
用户516816614584110 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦10 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He10 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ15 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊15 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码16 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js