百度地图之覆盖物添加删除

        map.addOverlay(marker);

//增加点 方法:

     var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点

     
        map.addOverlay(polyline);

//增加折线 方法:

  var polyline = new BMap.Polyline([
        new BMap.Point(116.399, 39.910),
        new BMap.Point(116.405, 39.920),
        new BMap.Point(116.425, 39.900),
        new BMap.Point(116.399, 39.910)
    ], {
        strokeColor: "red",  //边框颜色
        strokeWeight: 2,  // 边框宽度
        strokeOpacity: 0.5 // 透明度
    });


        map.addOverlay(circle);

//增加圆 方法:

var circle = new BMap.Circle(point, 1000, {               // 1000代表半径
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    }); //创建圆


        map.addOverlay(polygon);

//增加多边形 方法:

var polygon = new BMap.Polygon([
        new BMap.Point(116.587112, 39.920977),
        new BMap.Point(116.385243, 39.913063),
        new BMap.Point(116.594226, 39.917988),
        new BMap.Point(116.401772, 39.921364),
        new BMap.Point(116.41248, 39.927893)
    ], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    }); //创建多边形


        map.addOverlay(rectangle);

//增加矩形方法:

var pStart = new BMap.Point(116.392214, 39.918985);
    var pEnd = new BMap.Point(116.41478, 39.911901);
    var rectangle = new BMap.Polygon([
        new BMap.Point(pStart.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pStart.lat),
        new BMap.Point(pEnd.lng, pEnd.lat),
        new BMap.Point(pStart.lng, pEnd.lat)
    ], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    }); //创建矩形

 

 

 

添加覆盖物的方法:                map.addOverlay(添加的东西);

删除覆盖物的方法:                map.clearOverlays();//直接全部删除


 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图添加复杂覆盖物的步骤包括以下几个部分: 1. 引入百度地图 JavaScript API,并在 Vue 组件中加载地图。 2. 定义复杂覆盖物的构造函数,包括需要的参数和方法。 3. 在 Vue 组件中创建复杂覆盖物对象,并添加到地图中。 下面是一个简单的示例代码,可以帮助您理解如何在 Vue 中添加复杂覆盖物: ``` <template> <div class="map-container"> <div class="map" ref="map"></div> </div> </template> <script> export default { name: 'MapContainer', data() { return { map: null, complexOverlay: null }; }, mounted() { // 加载地图 this.initMap(); }, methods: { initMap() { this.map = new BMap.Map(this.$refs.map); this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建复杂覆盖物 this.createComplexOverlay(); // 添加复杂覆盖物到地图中 this.map.addOverlay(this.complexOverlay); }, createComplexOverlay() { function ComplexOverlay(point, text) { this._point = point; this._text = text; } ComplexOverlay.prototype = new BMap.Overlay(); ComplexOverlay.prototype.initialize = function(map) { this._map = map; var div = document.createElement('div'); div.style.position = 'absolute'; div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat); div.style.backgroundColor = 'red'; div.style.color = 'white'; div.style.padding = '5px'; div.style.borderRadius = '5px'; div.innerText = this._text; map.getPanes().labelPane.appendChild(div); this._div = div; return div; }; ComplexOverlay.prototype.draw = function() { var pixel = this._map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x + 'px'; this._div.style.top = pixel.y + 'px'; }; var point = new BMap.Point(116.404, 39.915); var text = '这是一个复杂的覆盖物'; this.complexOverlay = new ComplexOverlay(point, text); } } }; </script> <style scoped> .map-container { width: 100%; height: 100vh; } .map { width: 100%; height: 100%; } </style> ``` 在这个示例代码中,我们首先在 Vue 组件中加载了百度地图,并创建了一个 `MapContainer` 组件。在 `initMap()` 方法中,我们创建了一个复杂覆盖物对象,并在地图中添加了这个覆盖物。 复杂覆盖物是通过定义一个构造函数来创建的,并继承了 `BMap.Overlay` 类的原型。这个构造函数包括一个表示位置的坐标点和一个文本字符串。在 `initialize()` 方法中,我们创建了一个 DOM 元素,并设置了样式和文本内容。然后,我们将这个 DOM 元素添加到地图的 `labelPane` 图层上,最后将这个 DOM 元素返回,以便在地图上显示。在 `draw()` 方法中,我们更新了 DOM 元素的位置,以确保它始终位于正确的位置。 这只是一个简单的示例,您可以根据您的需求来定义更复杂的覆盖物,并实现更多的方法和属性。希望这能帮到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值