pc端引用百度地图

 

<template>
  <div class="mod-p-delivery">
    <div class="search-bar">
      <div class="input-row">
        <el-form
          @submit.native.prevent
          :inline="true"
          :model="searchForm"
          @keyup.enter.native="searchChange()"
          size="small"
        >
          <el-form-item label="司机姓名：" class="search-form-item">
            <el-input
              style="width: 210px"
              v-model="searchForm.driverName"
              placeholder="请输入司机姓名"
              clearable
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="searchChange(true)" type="primary"
              >搜索</el-button
            >
            <el-button @click="clear()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

    <baidu-map
      class="bm-view"
      :center="{ lng: center.longitude, lat: center.latitude }"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
    >
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-marker
        :icon="{ url: mapIcon, size: { width: 120, height: 120} }"
        :position="{ lng: item.longitude, lat: item.latitude }"
        @click="clickMarker(item)"
        v-for="item in mapData"
        :key="item.id"
      >
      </bm-marker>
      <bm-info-window
        :position="windowPosition"
        :show="show"
        @close="infoWindowClose"
        @open="infoWindowOpen"
      >
        <div>司机： {{ windowData.driverName }}</div>
        <div>车牌： {{ windowData.licenseNumber }}</div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import mapIconPath from "@/assets/img/smallCar.png";
export default {
  data() {
    return {
      mapIcon: mapIconPath,
      position: { lng: "", lat: "", title: "" },
      searchForm: {
        driverName: "",
      },
      center: {},
      zoom: 11,
      show: false,
      mapData: [],
      positiaon: {},
      windowData: {}, //信息窗体数据
      windowPosition: {}, //信息窗体位置坐标
    };
  },
  created() {
    this.getgps();
  },
  mounted() {},
  methods: {
    initMaker() {
      var latitudeSum = 0;
      var longitudeSum = 0;
      if (this.mapData.length) {
        this.mapData.forEach((item) => {
          (latitudeSum += Number(item.latitude)),
            (longitudeSum += Number(item.longitude));
        });
        this.center.latitude = Number(latitudeSum) / this.mapData.length;
        this.center.longitude = Number(longitudeSum) / this.mapData.length;
      }
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
    // 点击点标志
    clickMarker(data) {
      this.show = !this.show;
      this.windowData = data;
      this.windowPosition = {
        lng: data.longitude,
        lat: data.latitude,
      };
    },
    getgps() {
      this.$http({
        url: 接口,  // 接口
        method: "get",
        params: {
          driverName: this.searchForm.driverName,
        },
      }).then(({ data }) => {
        this.mapData = data;
        this.initMaker();
      });
    },
    // 搜索
    searchChange() {
      this.getgps();
      this.infoWindowClose()
    },
    // 重置
    clear() {
      this.searchForm.driverName = ''
      this.getgps()
      this.ininfoWindowClose()
    },
  },
};
</script>
<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 600px;
  .sample {
    width: 120px;
    height: 600px;
    text-align: center;
    padding: 10px;
    position: absolute;
  }
}
</style>