1.渲染地图(html部分)

<template>
  <view>
    <map
      id="test_map"
      ref="map1"
      style="width: 100%; height: 600px"
      :show-location="true"
      :longitude="map.longitude"
      :latitude="map.latitude"
      :markers="markers"
      :polyline="polyline"
      show-compass="true"
      show-location="true"
      :controls="controls"
      @tap="tapMap"
    >
    </map>
    <button @click="dingwei">定位到"北京西站"</button>
    <button @click="dingwei2">ref 定位到"北京西站"</button>
    <button @click="chooseLocation">选择地点</button>
    <button @click="getDriverLine">开始导航</button>
    <button @click="openNavigation">打开app</button>
    <button @click="openNavigation">规划路线</button>
  </view>
</template>  

2.数据和方法

<script>
export default {
  props: {
    getLocation: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      mapContext: {},
      map: {
        longitude: "", //经度
        latitude: "", //纬度
      },
      form: {
        name: "",
        area: "",
        address: "",
        location: "",
      },
      runningRoute: "",
      polyline: [
        {
          // 每个点的经纬度
          points: [
            {
              longitude: 118.769025,
              latitude: 31.976056,
            },
            {
              longitude: 118.77464,
              latitude: 31.974362,
            },
            {
              longitude: 118.774039,
              latitude: 31.97631,
            },
          ],
          // 颜色
          color: "#000",
          // 宽度
          width: 10,
          dottedLine: true,
          arrowLine: true,
          colorList: true,
        },
      ],
      controls: [
        // {
        //   //在地图上显示控件，控件不随着地图移动
        //   id: 1, //控件id
        //   iconPath: "/static/c1.png", //显示的图标
        //   position: {
        //     //控件在地图的位置
        //     left: 15,
        //     top: 15,
        //     width: 50,
        //     height: 50,
        //   },
        // },
      ],
      markers: [
        // {
        //   longitude: 118.769032,
        //   latitude: 31.975258,
        //   iconPath: "/static/c1.png",
        // },
      ],
    };
  },
  created() {
    let _this = this;
    if (this.getLocation != null) {
      console.log("当前位置", this.getLocation);
      _this.map.longitude = this.getLocation.longitude;
      _this.map.latitude = this.getLocation.latitude;
      _this.getDriverLine();
      return;
    }
  },
  mounted() {
    this.mapContext = uni.createMapContext("test_map", this);
    //起点
    // this.addMarler();
    // 终点
    // this.addEndMarler();
  },
  methods: {
    // 导航 会打开导航菜单供用户选择，都是打开内置地图
    openNavigation() {
    //方法1
      let longitude = xxxxx;
      let latitude = xxxxxx;
      let name = '想要去的地方'
      let url = ""; // app url
      let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
      plus.nativeUI.actionSheet(
        {
          //选择菜单
          title: "选择地图应用",
          cancel: "取消",
          buttons: [{ title: "高德地图" }], // 可选的地图类型
        },
        (e) => {
          // 判断用户选择的地图
          switch (e.index) {
            //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
            case 1:
              // 安卓
              if (plus.os.name == "Android") {
                url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
              } else {
                url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
              }
              webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`;
              break;
          }
          // 如果选中
          if (url != "") {
            url = encodeURI(url);
            // 打开 app 导航
            plus.runtime.openURL(url, (err) => {
              // 失败回到
              // 如果失败则说明未安装 直接 打开网页版进行导航
              // 毕竟用户可能没有安装app但一定安装的有浏览器
              plus.runtime.openURL(webUrl);
            });
          }
        }
      );
      //方法2
      uni.openLocation({
        latitude: 31.975258,
        longitude: 118.769032,
        name: "想去的地方",
        success() {
          console.log("success");
        },
      });
    },
	//路线规划，调用高德地图的api实现规划路线的功能。
    getDriverLine() {
        const that = this;
        //这个key是在高德导航app上申请的web路线规划
        const key = "";
        //起点坐标
        const origin = "xxx,xxx";
        //给起点坐标一个图标
        this.startingPoint()
        //给终点坐标一个图标
        this.endPoint()
        //终点坐标
        const destination = "xxx,xxx";
        uni.request({
          url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&key=${key}`,
          success: (res) => {
            console.log(res);
            const data = res.data.route;
            var points = [];
            if (data.paths && data.paths[0] && data.paths[0].steps) {
              var steps = data.paths[0].steps;
              for (var i = 0; i < steps.length; i++) {
                //将每一步的数据放到points数组中
                var poLen = steps[i].polyline.split(";");
                for (var j = 0; j < poLen.length; j++) {
                  points.push({
                    longitude: parseFloat(poLen[j].split(",")[0]),
                    latitude: parseFloat(poLen[j].split(",")[1]),
                  });
                }
              }
      	console.log(data.paths[0].steps[0].instruction)
      	//这个是我用来测试的，指的是开始导航之后的要走的第一步路
      	that.runningRoute = data.paths[0].steps[0].instruction;
      	console.log('行驶路线-----------',that.runningRoute)
            }
           //这个就是走的路，下面有几个属性在app上不支持
            that.polyline = [
              {
                points: points,
                color: "#0091ff",
                dottedLine: true,
                width: 15,
                arrowLine: true,
                colorList: true,
              },
            ];
          },
          fail: function (res) {
            console.log("获取路线失败", res);
          },
        });
      },
    },
    // 规划路线的时候给起点一个marker，
      startingPoint() {
        let point = [
          {
            id: 1,
            width: 40,
            height: 40,
            latitude: xxxx,
            longitude: xxxx,
            iconPath: "/static/qidian.png",
            anchor: {
              x: 0.5,
              y: 1,
            },
          },
        ];
        this.markers = this.markers.concat(point);
      },
      // 规划路线的时候给终点一个marker，
      endPoint() {
        let point = [
          {
            id: 2,
            width: 40,
            height: 40,
            latitude: xxxx,
            longitude: xxxx,
            iconPath: "/static/zhongdian.png",
            anchor: {
              x: 0.5,
              y: 1,
            },
          },
        ];
        this.markers = this.markers.concat(point);
    daohang() {
      uni.openLocation({
        longitude: parseFloat(118.769025),
        latitude: parseFloat(31.976056),
        scale: 18,
        success: function () {
          console.log("success");
        },
      });
    },
    //点击之后打点的功能
    tapMap(e) {
      var that = this;
      var id = e.currentTarget.id;
      var maps = uni.createMapContext("test_map", this).$getAppMap();

      maps.onclick = function (point) {
        console.log(point);

        point.iconPath = "/static/c1.png";
        that.markers = that.markers.concat(point);

        uni.showToast({
          title: "添加成功",
          icon: "none",
        });
      };
    },
    //定位当前位置方法1
    dingwei() {
      this.mapContext.moveToLocation({
        //该固定坐标为高德地图拾取,位置:北京西站
        latitude: 39.894589,
        longitude: 116.32125,
        success: function (res) {
          console.log("此处无回调!!!本条信息未在控制台打印");
          console.log(res);
        },
      });
    },
    //定位当前位置方法2
    dingwei2() {
      console.log(this.$refs.map1);
      this.$refs.map1.moveToLocation(
        {
          //该固定坐标为高德地图拾取,位置:北京西站
          latitude: 39.894589,
          longitude: 116.32125,
        },
        function (res) {
          console.log("此处无回调!!!本条信息未在控制台打印");
          console.log(res);
        }
      );
    },

    //自带选址（这个我没用到）
    chooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          console.log(res);
          this.form.name = res.name;
          this.form.area = res.address;
          this.form.location = this.util.formatLocation(
            res.longitude,
            res.latitude
          );
          this.setMap(res);
        },
      });
    },
    setMap(res) {
      this.longitude = res.longitude;
      this.latitude = res.latitude;
      this.markers[0].longitude = res.longitude;
      this.markers[0].latitude = res.latitude;
    }
  },
};
</script>