标签：script app id item let AMap new uni 高德

盒子部分

    <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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。