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]
    },
相关推荐
Web漫游2 分钟前
🔥2025年了你还不会使用Vue3?
javascript·vue.js
天狗精灵10 分钟前
从节点重排看React 与 Vue3 的 Diff 算法
前端·vue.js·react.js
前端大白话13 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
fury_12316 分钟前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js
万岳软件开发小城22 分钟前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
拖孩34 分钟前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js
来自星星的坤8 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
程序猿熊跃晖10 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
前端开心果11 小时前
vue实现静默打印pdf
前端·vue.js·pdf
OpenTiny社区12 小时前
TinyVue v3.22.0 正式发布:深色模式上线!集成 UnoCSS 图标库!TypeScript 类型支持全面升级!
前端·vue.js·开源