Vue2使用腾讯地图实现：输入起始点规划路线（运用地址解析）

一、实现效果

二、步骤

1、在index.html中引入腾讯地图

（文件路径：public\index.html）

（ps:记得替换成自己的key）

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>

2、创建文件cb.js

（文件路径：src\utils\cb.js）

（ps:utils是我创的文件夹，放别的文件夹时在main.js引入记得改路径）

/**
 * cb腾讯地图路线规划回调函数
 * @param {*} ret
 */
export function cb(ret) {
  var coords = ret.result.routes[0].polyline,
    pl = [];
  //坐标解压（返回的点串坐标，通过前向差分进行压缩）
  var kr = 1000000;
  for (var i = 2; i < coords.length; i++) {
    coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
  }
  //将解压后的坐标放入点串数组pl中
  for (var n = 0; n < coords.length; n += 2) {
    pl.push(new window.TMap.LatLng(coords[n], coords[n + 1]));
  }
  display_polyline(pl); //显示路线
  //标记起终点marker
}

/**
 * display_polyline创建路线
 * @param {*} pl
 */
export function display_polyline(pl) {
  //创建 MultiPolyline显示折线
  new window.TMap.MultiPolyline({
    id: "polyline-layer", //图层唯一标识
    map: window.map, // 绘制到目标地图
    //折线样式定义
    styles: {
      style_blue: new window.TMap.PolylineStyle({
        color: "#3777FF", //线填充色
        width: 8, //折线宽度
        borderWidth: 3, //边线宽度
        borderColor: "#FFF", //边线颜色
        lineCap: "round", //线端头方式
        showArrow: true, // 显示箭头
        arrowOptions: {
          width: 6,
          height: 10,
          space: 20,
        },
      }),
      // 彩虹线
      caihong: new window.TMap.PolylineStyle({
        color: "#3777FF", //线填充色
        width: 8, //折线宽度
        borderWidth: 3, //边线宽度
        showArrow: true,
        arrowOptions: {
          width: 6,
          height: 10,
          space: 70,
        },
        lineCap: "round",
      }),
    },
    //折线数据定义
    geometries: [
      {
        id: "pl_1", // 折线唯一标识，删除时使用
        styleId: "style_blue", // 绑定样式名
        paths: pl,
      },
    ],
  });
}

3、在main.js引入

（文件路径：src\main.js）

// 引入腾讯地图路线规划
import { cb } from './utils/cb';
window.cb = cb
import { display_polyline } from './utils/cb';
window.display_polyline = display_polyline

4、在需要添加地图组件中运用

template部分：

（ps：样式这里没贴完整）

<el-input v-model="start" placeholder="上车地点" />
<el-input v-model="end" placeholder="目的地" />
<el-button type="primary" style="margin-top: 10px; display: block;" @click="getCoordinates">查看路线</el-button>

script部分：

（ps：记得把key替换成自己的，./images/1.png和./images/2.png为起点图标和终点图标记得添加）

<script>
export default {
  data() {
    return {
       start: null,
       end: null,
       location: null,
       locationEnd: null,
       map: null,
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      window.map = new window.TMap.Map(
        document.getElementById("map-routerPlanning"),
        {
          center: new window.TMap.LatLng(39.980619, 116.321277), // 地图显示中心点
          zoom: 15,
          pitch: 43.5,
          rotation: 45,
        }
      );
    },
    // 浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
    jsonp_request(url) {
      var script = document.createElement("script");
      script.src = url;
      document.body.appendChild(script);
    },
    initCar() {
      // WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
      var url = "https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
      url += `?from=${this.location.lat},${this.location.lng}`; // 起点坐标
      url += `&to=${this.locationEnd.lat},${this.locationEnd.lng}`; // 终点坐标
      url += "&output=jsonp&callback=cb"; // 指定JSONP回调函数名
      url += "&key=你的key"; // 自己申请的key值
      console.log(url)
      this.jsonp_request(url);
      new window.TMap.MultiMarker({
        id: "marker-layer",
        map: window.map,
        styles: {
          start: new window.TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            // 图片导入不可直接导入, 需要使用require赋值
            src: require("./images/1.png"),
          }),
          end: new window.TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: require("./images/2.png"),
          }),
        },
        geometries: [
          {
            id: "start",
            styleId: "start", // 绑定样式
            position: new window.TMap.LatLng(this.location.lat, this.location.lng),
          },
          {
            id: "end",
            styleId: "end",
            position: new window.TMap.LatLng(this.locationEnd.lat, this.locationEnd.lng),
          },
        ],
      });
    },
  },
}
</script>