vue使用高德地图动态设置marker,polyline,点击显示。

按照高德官网，引入sdk。

效果如下

点击地图上的车辆icon显示它的轨迹，右上角的选择框效果如下

选中车牌将它的位置定位到地图中心，并设置地图缩放等级。

initMap(e, p) {//e:经纬度，p:zoom
      let that = this;
      var map = new AMap.Map("map", {
        center: [120.67, 30.07], // [纬度，经度]
        resizeEnable: true,
        scrollWheel: true,
        zoom: 12,
        mapStyle: "amap://styles/macaron", //设置地图的显示样式
      });
      //重新设置地图中心点
      if (e) {
        map.setZoomAndCenter(p, e);
      }
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], function () {
        // map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.Scale());
      });
      let locationList = that.list2;
      // 添加marker
      locationList.map((item) => {
        let state = item.cp;
        var marker = new AMap.Marker({
          position: [item.lat, item.lng], //位置
          offset: new AMap.Pixel(-10, -10),
          map: map,
          icon: require("../assets/img/car.png"), // 添加 Icon 图标 URL
        });
        // map.add(marker);

        // 创建折线实例
        var polyline = new AMap.Polyline({
          path: item.path,
          isOutline: true,
          outlineColor: "#ffeeff",
          borderWeight: 3,
          strokeColor: "#3366FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: "round",
          lineCap: "round",
          zIndex: 50,
        });

        marker.on("click", function (e) {
          map.remove(map.getAllOverlays("polyline"));//删除已经存在的轨迹
          map.add(polyline);
          that.cp = state;
        });
      });
      // map.setFitView(polyline, marker);
    },
   mounted() {
    this.map = this.initMap();
  },

下拉框选择代码

<div class="magWrap">
            <div class="btn" v-show="checked">{{ cp }}</div>
        <div class="select">
          <el-select
            v-model="value"
            placeholder="请选择车牌"
            @change="handleChange(value)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </div>
        <div class="cbox">
          <el-checkbox v-model="checked">显示车牌</el-checkbox>
        </div>
      </div>

       options: [
        {
          value: "all",
          label: "全部",
        },
        {
          value: [120.67, 30.07],
          label: "浙A15742",
        },
        {
          value: [120.8612070444, 30.0436018444],
          label: "浙B15742",
        },
        {
          value: [120.5659987111, 29.9430935111],
          label: "浙A17542",
        },
      ],

     handleChange(e) {
      let center = [e[0], e[1]];
      let fs = "";
      if (e == "all") {
        fs = 12;
        center = [120.67, 30.07];
      } else {
        fs = 16;
      }
      console.log(center, "test");
      this.initMap(center, fs);
    },