VUE + JavaScript API GL实现百度地图的自定义覆盖物、自定义小图标、折线、点

记录一下自己学习百度地图写的代码

<template>
  <el-dialog
    :title="mapTitle"
    custom-class="map-box"
    :visible.sync="mapShow"
    width="80%"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @open="initMap"
    @close="resetSelect"
  >
    <div class="map-container">
      <div class="top">
        <el-descriptions :column="2">
       
          <el-descriptions-item label="当前车辆位置">{{
            currentPosition
          }}</el-descriptions-item>
          
        </el-descriptions>
      </div>
      <div class="bottom">
        <div id="myMap" class="bm-view"></div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {
  },
  props: {
    courier: {
      type: String,
    },
    isTransit: Boolean, // 是否在途(true:在途 false:已签收)
    mapOrder: {},
    
    },
    mapTitle: {
      type: String,
      default: "",
    },
  },
  computed: {
    getImagePath() {
      return require("@/assets/images/车.svg");
    },
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      currentPosition: "",
      mapShow: false,
      points: [],
      // 起点(车辆出发位置)
      startPoint: {},
      // 目前车辆所在位置
      endPoint: {},
      map: null,
      trackNode: {
      { lnt: 110, lat: 20 },
        { lnt: 111, lat: 21 },
        { lnt: 112, lat: 22 },
      },
    };
  },
  methods: {
    // 展示地图窗口
    async showMap() {
      this.mapShow = true;
    },
    // 初始化地图
    async initMap() {
      this.$nextTick(async () => {
        await this.addPoints();
        // 初始化地图实例
        this.map = new BMapGL.Map("myMap");
        // 初始化节点对象数组
        var points = this.points.map((item) => {
          return new BMapGL.Point(item.lng, item.lat);
        });
        var index = points.length;
        // 定义地图的中心点和缩放等级
        this.map.centerAndZoom(
          points[0],
          12
        );
       
        // 绘制折线
        var polyline = new BMapGL.Polyline(points, {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5,
        });
        this.map.addOverlay(polyline);
        // 绘制起点
        var startMarker = new BMapGL.Marker(points[0]);
        this.map.addOverlay(startMarker);
        if (this.isTransit) {
          // 创建一个小图标对象表示在途
          var customIcon = new BMapGL.Icon(
            this.getImagePath,
            new BMapGL.Size(50, 60),
            {
              anchor: new BMapGL.Size(10, 50), // 图标的定位点相对于图标左上角的偏移值
            }
          );
          // 创建标注物并添加到地图上
          var iconMarker = new BMapGL.Marker(points[index - 1], {
            icon: customIcon,
          });
          this.map.addOverlay(iconMarker);
        } else {
          //自定义覆盖物
          function customOverlay(point, text) {
            this._point = point;
            this._text = text;
          }
          // 继承BMapGL.Overlay
          customOverlay.prototype = new BMapGL.Overlay();
          // 实现initialize方法来创建自定义覆盖物
          customOverlay.prototype.initialize = function (map) {
            this._map = map;
            var pixel = map.pointToOverlayPixel(this._point, {
              useRound: false, // 设置此参数,防止抖动
              fixPosition: true, // 覆盖物跨越180时修正位置
            });
            var div = (this._div = document.createElement("div"));
            div.style.position = "absolute";
            div.style.zIndex = BMapGL.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
            div.style.color = "white";
            div.style.padding = "4px 8px";
            div.style.borderRadius = "4px";
            div.style.cursor = "pointer";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "12px";
            div.style.lineHeight = "1.5";
            div.innerHTML = this._text;
            map.getPanes().labelPane.appendChild(div);
            return div;
          };
          customOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - 28 + "px";
            this._div.style.top =
              pixel.y - 50 - parseInt(this._div.style.padding) + "px";
          };
          // 创建自定义覆盖物对象
          var txt = "已签收";
          var myCompOverlay = new customOverlay(points[index - 1], txt);
          this.map.addOverlay(myCompOverlay);
          var endMarker =
            index > 1 ? new BMapGL.Marker(points[index - 1]) : null;
          this.map.addOverlay(endMarker);
        }
        // 创建地理编码实例
        var myGeo = new BMapGL.Geocoder();
        // 根据坐标得到地址描述
        myGeo.getLocation(points[index - 1], (result) => {
          if (result) {
            this.currentPosition = result.address;
          }
        });
        this.map.enableScrollWheelZoom(true);
        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        this.map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        this.map.addControl(zoomCtrl);
      });
    },
    async addPoints() {
      const points = this.trackNode.map((item) => {
        return {
          lng: item.lnt,
          lat: item.lat,
        };
      });
      this.points = points;
    },
    resetSelect() {
      this.destroyMap();
      this.$emit("closeMap");
    },
    // 关闭时销毁地图实例
    destroyMap() {
      this.map.clearOverlays();
      this.map.destroy();
      this.map = null;
    },
  },
};
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 560px;
}
.map-box {
  .el-dialog__body {
    padding: 0 !important;
  }

  .el-button--medium {
    padding: 10px 20px !important;
  }
  .map-container {
    display: flex;
    flex-direction: column;
    background: #a2c1f3;
    height: 700px;
    padding: 10px;
  }
}
.top {
  flex: 1;
  background: #a2c1f3;
  padding: 0px;
  max-height: 110px;
}
.bottom {
  flex: 1;
  background: #a2c1f3;
  padding: 0px;
  // min-width: 100%;
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现复杂自定义覆盖物可以使用百度地图API中提供的Overlay类和自定义覆盖物自定义覆盖物是指在地图上添加自己的DOM元素,可以通过DOM元素来实现自己的样式和交互效果。 下面是在Vue实现复杂自定义覆盖物的步骤: 1. 安装vue-baidu-map 在终端中运行以下命令来安装vue-baidu-map: ``` npm install vue-baidu-map --save ``` 2. 注册vue-baidu-map组件 在Vue组件中注册vue-baidu-map组件: ``` import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap } } ``` 3. 在模板中添加地图 在模板中添加vue-baidu-map标签,并设置地图的中心和缩放级别: ``` <template> <div> <BaiduMap :center="center" :zoom="zoom"></BaiduMap> </div> </template> <script> export default { data() { return { center: {lng: 116.404, lat: 39.915}, zoom: 15 } } } </script> ``` 4. 创建自定义覆盖物Vue组件的mounted()生命周期函数中,创建自定义覆盖物: ``` mounted() { const map = this.$refs.baiduMap.getBMap() const BMap = window.BMap const CustomOverlay = function(point, options) { this._point = point this._options = options } CustomOverlay.prototype = new BMap.Overlay() CustomOverlay.prototype.initialize = function(map) { this._map = map const div = document.createElement('div') div.style.position = 'absolute' div.style.width = '100px' div.style.height = '100px' div.style.background = '#fff' div.style.borderRadius = '50%' div.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.3)' div.style.cursor = 'pointer' div.innerHTML = '<span>自定义覆盖物</span>' div.addEventListener('click', () => { console.log('自定义覆盖物击了') }) map.getPanes().labelPane.appendChild(div) this._div = div return div } CustomOverlay.prototype.draw = function() { const pixel = this._map.pointToOverlayPixel(this._point) this._div.style.left = pixel.x - 50 + 'px' this._div.style.top = pixel.y - 50 + 'px' } const point = new BMap.Point(116.404, 39.915) const myOverlay = new CustomOverlay(point) map.addOverlay(myOverlay) } ``` 在上面的代码中,我们创建了一个CustomOverlay类,它继承了BMap.Overlay类,用于创建自定义覆盖物。在CustomOverlay类的initialize方法中,我们创建了一个DIV元素,并设置了DIV元素的样式和内容。我们将DIV元素添加到地图的labelPane层中,这样它就可以显示在其他标注之上了。在CustomOverlay类的draw方法中,我们将DIV元素的位置设置为自定义覆盖物的位置。 5. 添加CSS样式 最后,我们需要添加CSS样式来定义自定义覆盖物的样式: ``` <style> .custom-overlay { position: absolute; width: 100px; height: 100px; background: #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); cursor: pointer; } </style> ``` 在上面的代码中,我们定义了".custom-overlay"类来设置自定义覆盖物的样式。 这样就可以在Vue实现复杂自定义覆盖物了。可以根据需要修改CustomOverlay类的实现,来实现更复杂的自定义覆盖物

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值