uni-app中调用高德地图去设置点和轨迹

盒子部分

    <view style="width: 100%; height: 100%" id="busContainer"> </view>

样式部分

.originImg {
  width: 72rpx;
  height: 100rpx;
  img {
    width: 100%;
    height: 100%;
  }
}

.origin-title {
  font-size: 23rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #878a8c;
  width: 100rpx;
  position: absolute;
  left: -8rpx;
}

script代码部分

1.初始化一个script标签，

init(id) {

      this.$nextTick(() => {

        var script = document.getElementById("mapTest");

        let that = this;

        script

          ? this.loop(id)

          : (function () {

              var script = document.createElement("script");

              script.type = "text/javascript";

              script.setAttribute("id", "mapTest");

              script.src =

                "https://webapi.amap.com/maps?v=1.4.15&key=高德地图中申请的key值&plugin=AMap.PlaceSearch";

              document.body.appendChild(script);

              that.loop(id);

            })();

      });

    },

2.调用初始化地图的方法

loop(id) {
      try {
        console.log("script1");
        this.initMap(id);
      } catch (e) {
        console.log("script", e);
        setTimeout(() => this.loop(id), 200);
      }
    },

3.初始化地图

initMap(id) {
      this.map = new AMap.Map("busContainer", {
        zoom: 15,
        center: [121.557053, 29.807482],
      });
      if (this.map) {
          //  调用获取公交轨迹数组方法
      }
    },

4.设置公交车点和轨迹图

setMarkerAndPolyline(station_list, attraction_list) {
      let t = this;
      // 绘制旅游站点标记
      attraction_list.forEach((item) => {
        let markers1 = new AMap.Marker({
          // 图标尺寸
          size: new AMap.Size(25, 34),
          // 图标的取图地址
          image:
            "https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png",
          // 图标所用图片大小
          imageSize: new AMap.Size(135, 40),
          position: [item.longitude, item.latitude],
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(-9, -3),
        });
        this.map.add(markers1);
      });

      // 绘制公交站点标记
      station_list.forEach((item) => {
        let originImg =
          "https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png";
        let originContent = `<div class="flex-j-c"><div class="originImg"><img src="${originImg}"></div></div><div class="origin-title">${item.name}</div>`;

        let markers1 = new AMap.Marker({
          content: originContent,
          position: [item.longitude, item.latitude],
          offset: new AMap.Pixel(-20, -44),
        });
        this.map.add(markers1);
      });

      let polyline = null;

      //处理轨迹数组
      let polylineArr = station_list.map((item) => {
        return [item.longitude, item.latitude];
      });
      // 绘制轨迹

      if (polylineArr && polylineArr.length > 0) {

        polyline = new AMap.Polyline({
          map: t.map,
          path: polylineArr,
          showDir: true,
          strokeColor: "#3e8af6", //线颜色
          strokeWeight: 7, //线宽
          lineJoin: "round", // 折线拐点连接处样式
        });
        t.lineArr = polylineArr;
        t.map.setFitView();
      }
    },

标签：script,app,id,item,let,AMap,new,uni,高德
来源： https://www.cnblogs.com/zm-0101/p/16602093.html