vuebaidumap 删除覆盖物_百度地图JavaScript如何清除指定类型的覆盖物

PoiMarker.prototype = newBMap.Overlay();

PoiMarker.prototype.initialize= function(map) {this._map =map;

const div= this._div = document.createElement("div");

div.style.zIndex= BMap.Overlay.getZIndex(500);

div.style.position= "absolute";

div.style.background= "url(http://s.xxx.com/images/bcg-green.png) no-repeat bottom";

div.style.cursor= "pointer";

div.style.height= "42px";

const img= document.createElement("img");

img.src= this._img

div.style.zIndex= BMap.Overlay.getZIndex(400);

img.style.height= "36px";

img.style.width= "36px";

img.style.borderRadius= "26px";

img.style.border= "2px solid #72b80a";

div.appendChild(img);//POI点击事件

div.onclick = (e) =>{//禁止事件冒泡

const oEvent = e ||event;

oEvent.cancelBubble= true;//删除其它的 poiInfoWindowMarker

//获取地图上所有的覆盖物

const allOverlay = this._map.getOverlays();

for (const item of allOverlay) {

if (item instanceof PoiInfoWindowMarker) {

this._map.removeOverlay(item);

}

}

const poiInfoWindowMarker= new PoiInfoWindowMarker(this._point, this._img);//添加节点数覆盖物到地图上(并将覆盖物注册)

this._map.addOverlay(poiInfoWindowMarker);

};

map.getPanes().labelPane.appendChild(div);returndiv;

};

PoiMarker.prototype.draw= function() {

const map= this._map;

const pixel= map.pointToOverlayPixel(this._point);this._div.style.left = (pixel.x - 18) + "px";this._div.style.top = (pixel.y - 40) + "px";

};this.poiMarker = PoiMarker

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用百度地图添加自定义覆盖物,可以使用vue-baidu-map这个库来实现。在vue-baidu-map中,可以使用百度地图API中提供的Overlay类来创建自定义覆盖物。 以下是在vue-baidu-map中添加自定义覆盖物的步骤: 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 point = new BMap.Point(116.404, 39.915) const myIcon = new BMap.Icon('path/to/myIcon.png', new BMap.Size(30, 30)) const marker = new BMap.Marker(point, {icon: myIcon}) map.addOverlay(marker) } ``` 在上面的代码中,我们创建了一个自定义覆盖物,它是一个图片标记,位于地图的(116.404, 39.915)处。我们使用BMap.Icon类来创建一个自定义图标,并使用BMap.Marker类来创建一个标记,并将它添加到地图中。 5. 在模板中显示自定义覆盖物 在模板中添加自定义覆盖物的容器,并使用CSS样式设置容器的位置和大小: ``` <template> <div> <BaiduMap :center="center" :zoom="zoom"></BaiduMap> <div class="marker-container"></div> </div> </template> <style> .marker-container { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; } </style> ``` 在上面的代码中,我们添加了一个名为"marker-container"的DIV容器,用于显示自定义覆盖物。我们使用CSS样式将容器放置在地图的中心位置,并设置容器的大小为30x30,该大小与自定义图标的大小相同。 6. 显示水波纹效果 要在自定义覆盖物上显示水波纹效果,可以使用CSS3动画和JavaScript。以下是实现水波纹效果的代码: ``` mounted() { const map = this.$refs.baiduMap.getBMap() const BMap = window.BMap const point = new BMap.Point(116.404, 39.915) const myIcon = new BMap.Icon('path/to/myIcon.png', new BMap.Size(30, 30)) const marker = new BMap.Marker(point, {icon: myIcon}) map.addOverlay(marker) const ripple = document.createElement('div') ripple.classList.add('ripple') marker.getContent().appendChild(ripple) marker.addEventListener('click', e => { const x = e.offsetX const y = e.offsetY ripple.style.left = x + 'px' ripple.style.top = y + 'px' ripple.classList.add('ripple-active') setTimeout(() => { ripple.classList.remove('ripple-active') }, 1000) }) } ``` 在上面的代码中,我们使用JavaScript创建了一个DIV元素,用于显示水波纹效果。我们将这个DIV元素添加到自定义覆盖物的容器中,并在自定义覆盖物上添加了一个点击事件监听器。当用户点击自定义覆盖物时,我们获取点击位置的坐标,并将水波纹DIV元素定位到该位置,并添加CSS3动画类"ripple-active"来显示水波纹效果。我们在1秒后从水波纹DIV元素中移除"ripple-active"类,以停止水波纹效果。 7. 添加CSS样式 最后,我们需要添加CSS样式来定义水波纹效果和自定义覆盖物的样式: ``` .marker-container { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; } .ripple { position: absolute; border-radius: 50%; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); opacity: 0; transition: opacity 1s linear; } .ripple-active { opacity: 1; } ``` 在上面的代码中,我们定义了"marker-container"类来设置自定义覆盖物的样式,以及"ripple"和"ripple-active"类来设置水波纹效果的样式。我们使用"position: absolute"来定位元素,并使用"transform: translate(-50%, -50%)"将元素的中心点设置为其父元素的中心点。我们还使用"opacity"和"transition"属性来定义水波纹效果的透明度和过渡效果。 这样就可以在Vue中使用百度地图添加自定义覆盖物(水波纹)了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值