微信小程序将高德地图转为腾讯地图的自行车路线规划

微信小程序后台首页开发设置

相关文档

腾讯后台

在这里插入图片描述

微信小程序接入JDK

JDK腾讯地图文档

腾讯路线规划文档

核心代码

<map  id="myMap" ref="myMap" style="width: 100%; height: calc(100vh - 80px)"
          :latitude="latitude" :scale="scale" :longitude="longitude" @markertap="clickmarkertapfun"
          :polyline="polyline" :markers="covers" :circles="circles"></map>

///找到引入高德地图的地方替换JDK  替换key值
import amapFile from "../pluginsMap/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js";
// 更换腾讯地图
var myAmapFun = new amapFile({
  key: "腾讯地图key",
});

data() {
    return {
      detail: {},
      scale: 15, //地图缩放级别
      latitude: -1,
      longitude: -1,
      covers: [], //地图锚点
      coversList: [], //备用的锚点数据
      polyline: [], //路线规划容器
      circles: [],
      storeInfo: "",
    };
  },
//点击当前点位
clickmarkertapfun(e) {
      let id = e.detail.markerId;
      if (id <= 0) {
        return;
      }
      let storeInfo = this.coversList[id - 1];
      console.log(storeInfo);
      this.detail = {
        id: storeInfo.id,
        latitude: storeInfo.latitude,
        longitude: storeInfo.longitude,
      };
      console.log(this.detail);
      this.storeId = storeInfo.id;
      this.getMerchantBottomInfo();
      //起点
      let local = uni.getStorageSync(keys.mylocalhost);
      console.log("local >>", local);
      if (!local) return;
      uni.showLoading({
        title: "路线规划中",
      });
      myAmapFun.direction({
        mode: 'bicycling',
        from: {
          longitude: local.longitude,
          latitude: local.latitude
        },
        to: {
          longitude: this.detail.longitude,
          latitude: this.detail.latitude
        },
        success: function (res) {
          var ret = res;
          var coors = ret.result.routes[0].polyline, pl = [];
          //坐标解压(返回的点串坐标,通过前向差分进行压缩)
          var kr = 1000000;
          for (var i = 2; i < coors.length; i++) {
            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
          }
          //将解压后的坐标放入点串数组pl中
          for (var i = 0; i < coors.length; i += 2) {
            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          }
          // console.log(pl, '你好')
          that.polyline = [
            {
              points: pl,
              color: "#0091ff",
              width: 6,
            },
          ];
          uni.hideLoading();
        },
      });
    },

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-16 07:34:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-16 07:34:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-16 07:34:02       82 阅读
  4. Python语言-面向对象

    2024-03-16 07:34:02       91 阅读

热门阅读

  1. Redis 的 RDB 和 AOF

    2024-03-16 07:34:02       39 阅读
  2. HTML5、CSS3面试题(四)

    2024-03-16 07:34:02       35 阅读
  3. Docker——问题解决:服务器端和Windows端IP互通

    2024-03-16 07:34:02       46 阅读
  4. C语言实现B树算法

    2024-03-16 07:34:02       37 阅读
  5. 【物联网】Modbus 协议简介

    2024-03-16 07:34:02       40 阅读
  6. STM32移植SFUD

    2024-03-16 07:34:02       39 阅读
  7. STM32利用AES加密数据、解密数据

    2024-03-16 07:34:02       35 阅读
  8. 项目中如何排查jvm问题

    2024-03-16 07:34:02       39 阅读
  9. 1688中国站获得联系方式 API 返回值

    2024-03-16 07:34:02       52 阅读