vuecli使用高德地图，实现自定义信息框，并点击跳转页面

1.public文件夹中index.html引入搞得地图

​
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.5&key=‘自己的key’"></script>

​

2.html

<div class="col">
 <div id="container" style="height: 600px"></div>
</div>

js

 //获取需要渲染的地图列表
this.http.getDealer(obj).then((res) => {
        this.demoList = res.data.list.list;
        this.init(this.demoList[0].coordinate.split(","));
 });
//地图

    init(center) {
      const self = this;

      let map = new AMap.Map("container", {
        center: center,
        resizeEnable: true,
        zoom: 12,
      });
      // map.clearMap();
      // var markers = [];
      var infoWindow;
      let resData = this.demoList;
      var marker;
      for (var i = 0; i < resData.length; i++) {
        marker = new AMap.Marker({
          position: resData[i].coordinate.split(","),
          zIndex: 101,
          map: map,
        });
        marker.setMap(map);
        // marker.id = resData[i].id;
        marker.name = resData[i].carDealerName;
        marker.address = resData[i].carDealerAddress;
        marker.tel = resData[i].carDealerPhone;
        marker.on("click", (e) => {
          this.currentId = e.target.id;
          var info = [];
          info.push(
            "<div class='Box' style=''><div class='myTitle'>" + e.target.name + "</div>"
          );
          info.push(
            "<div><div class='MyAdress'><img  class='iico' src='https://kairui-ali.oss-cn-zhangjiakou.aliyuncs.com/864765731977430213.png'>" +
              e.target.address +
              "</div>"
          );
          info.push(
            "<div><div class='myTel'><img class='iico' src='https://kairui-ali.oss-cn-zhangjiakou.aliyuncs.com/917757616662382652.png'>" +
              e.target.tel +
              "</div>"
          );
          info.push(
            '<div><div class="myBtn border btnHov" onclick="getLen()">预约试驾</div></div>'
          );
          infoWindow = new AMap.InfoWindow({
            content: info.join("<br/>"),
          });
          infoWindow.open(map, e.lnglat);
          infoWindow.close();
        });
      }
      //地图内的事件
      window.getLen = () => {
        let that = this;
        window.location.href =
          "http://localhost:8080/#/Appointment?id=" + that.currentId;
      };
      // map.setFitView();
    },