vue-baidu-map 百度地图自定覆盖物偏移

vue yekong

vue 百度地图自定覆盖物不准确

地图

<template>
  <div class="maps">
    <baidu-map
      class="map"
      :scroll-wheel-zoom="true"
      :center="center"
      v-if="show"
      :zoom="zoom"
      @ready="handler"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @zoomend="syncCenterAndZoom">
      <car
        v-for="(item,index) in carlist" :key="index"
        :position="{lng: item.lng, lat: item.lat}"
        :active="item.active"
        :item="item"
        @mouseover.native="active = true"
        @mouseleave.native="active = false">
      </car>
      <gongsi
        v-for="(item,index) in list" :key="index"
        :position="{lng: item.lng, lat: item.lat}"
        :item="item"
        @mouseover.native="active = true"
        @mouseleave.native="active = false">
      </gongsi>
    </baidu-map>
  </div>
</template>

<script>

import {getCarPosition, getOrgPosition} from "../api/api/user";
import {mapGetters} from 'vuex';
import car from './mapover/car'
import gongsi from './mapover/gongsi'

export default {
  name: "bdmap",
  components: {car, gongsi},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      carData: [],
      orgData: [],
      center: {
        lng: 106.404,
        lat: 39.915
      },
      zoom: 8,
      show: false,
      listOrg: [],
      carlist: []
    }
  },
  computed: mapGetters(['companyid']),
  watch: {
    companyid() {
      this.getdata()
      this.getcardata()
    }
  },
  mounted() {
    this.getdata()
    this.getcardata()
  },
  methods: {
    syncCenterAndZoom(e) {
      const {lng, lat} = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    handler({
              BMap,
              map
            }) {
      let mapStyle = {style: 'midnight'}
      map.setMapStyle(mapStyle)
    },
    getdata() {
      var that = this
      getOrgPosition().then(function (res) {
        var data = res.data
        that.list = []
        data.forEach((type, index) => {
          type.properties.forEach((type2, index2) => {
            var data = {
              lng: type.coordinates[index2][0],
              lat: type.coordinates[index2][1],
              orgId: type2[0],
              orgName: type2[1],
              imgPath: type2[2],
              describe: type2[3],
              website: type2[4],
              offLine: type.offLine,
              onLine: type.onLine
            }
            that.list.push(data)
          });
        });
        that.center.lng = that.list[0].lng
        that.center.lat = that.list[0].lat
        that.show = true
        console.log(that.list)
        console.log('ceshi123')
        // res.data.carData.coordinates.forEach((type, index) => {
        //   console.log(type[1])
        //   console.log(type[0])
        //   var data = {
        //     lat: type[1],
        //     lng: type[0],
        //     num: res.data.carData.properties[index][0],
        //     carNum: res.data.carData.properties[index][1],
        //     createTime: res.data.carData.properties[index][2],
        //     isonline: res.data.carData.properties[index][3]
        //   }
        //   that.carData.push(data)
        // });
      })
    },
    getcardata() {
      var that = this
      getCarPosition().then(function (res) {
        var data = res.data
        that.carlist = []
        data.forEach((type, index) => {
          if (type.properties) {
            type.properties.forEach((type2, index2) => {
              var data = {
                lng: type.coordinates[index2][0],
                lat: type.coordinates[index2][1],
                num: type2[0],
                carNum: type2[1],
                createTime: type2[2],
                isonline: type2[3],
                offLine: type.offLine,
                onLine: type.onLine,
              }
              that.carlist.push(data)
            });
          }
        });
        console.log(that.carlist)
        console.log('ceshi123')
        // res.data.carData.coordinates.forEach((type, index) => {
        //   console.log(type[1])
        //   console.log(type[0])
        //   var data = {
        //     lat: type[1],
        //     lng: type[0],
        //     num: res.data.carData.properties[index][0],
        //     carNum: res.data.carData.properties[index][1],
        //     createTime: res.data.carData.properties[index][2],
        //     isonline: res.data.carData.properties[index][3]
        //   }
        //   that.carData.push(data)
        // });
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.maps {
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

组件

<template>
  <bm-overlay
    ref="customOverlay"
    pane="markerShadow"
    :class="{active}"
    class="overlay"
    @draw="draw">
    <div class="overx" :style="{'margin-top':top+'px','margin-left':left+'px',}">
      <img class="shexiangtou2" ref="overx" @click="handleClick" src="../../assets/icon_gongsi.png" alt="">
      <div class="mappopwin" v-show="show">
        <img class="close" @click="show=false" src="../../assets/icon_close.png" alt="">
        <h3>公司简介:{{ item.orgName }}</h3>
        <img :src="urls + item.imgPath" alt="">
        <div class="desc"><p>{{ item.describe }}</p></div>
        <a class="seemore" :href="item.website" target="_blank">查看更多 >></a>
      </div>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['text', 'position', 'active', 'item', 'name', 'img', 'desc', 'url'],
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload()
      },
      deep: true
    },
    item: {
      handler() {
        this.$refs.customOverlay.reload()
        let height = this.$refs.overx.offsetHeight;
        let width = this.$refs.overx.offsetWidth;
        this.top = -height
        this.left = -(width / 2)
      },
      deep: true
    },
  },
  data() {
    return {
      show: false,
      urls: 'http://h.jids.cn',
      top: 0,
      left: 0
    }
  },
  mounted() {
    let height = this.$refs.overx.offsetHeight;
    let width = this.$refs.overx.offsetWidth;
    this.top = -height
    this.left = -(width / 2)
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    draw({
           el,
           BMap,
           map
         }) {
      const {
        lng,
        lat
      } = this.position
      console.log('经纬度')
      console.log(lng)
      console.log(lat)
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 0 + 'px'
      el.style.top = pixel.y - 0 + 'px'
    }
  }
}
</script>

<style lang="scss" scoped>
.sample {
  overflow: hidden;
  color: #fff;
  text-align: center;
  position: absolute;
}

.overlay {
  background-size: 100% 100%;
  position: absolute;
  color: #fff;
  font-size: 0px;
}

.overlay .overx {
  position: relative;
}

.mapnum {
  width: 18px;
  height: 18px;
  background: #009944;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  position: absolute;
  left: 25px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  top: -0px;
}

.mapnum.active {
  width: 18px;
  height: 18px;
  background: #009944;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  top: -5px;
}

.ceshi {
  color: red !important;
}

.overlay.active .overx .mapnum {
  background: red !important;
}

.mappopwin {
  background: url("../../assets/gongsipop.png") no-repeat;
  background-size: 100% 100%;
  width: 400px;
  height: 409px;
  position: absolute;
  left: -400px;
  top: -390px;
  display: flex;
  z-index: 100000;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;

  .close {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    width: 14px;
    height: 14px;
  }

  h3 {
    font-size: 14px;
    font-family: PingFang;
    font-weight: bold;
    color: #FFFFFF;
    margin: 0 auto;
    padding: 0;
    width: 340px;
    text-align: left;
    margin-top: 40px;
  }

  img {
    width: 340px;
    height: 180px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .desc {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    height: 100px;
    width: 340px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    text-align: left;

    p {
      text-align: left;
      width: 100%;
    }
  }
}

.shexiangtou1 {
  width: 21px;
}

.shexiangtou2 {
  width: 27px;
  position: relative;
  z-index: 10;
}

.seemore {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  font-size: 14px;
  font-family: PingFang;
  font-weight: 500;
  color: #00C0FF;
  text-decoration: none;
  width: 320px;
  margin: 0 auto;
  text-indent: -10px;
}
</style>

喜欢