百度地图3D地球闪动点(修复不在视野内时无法隐藏marker的bug)

最新推荐文章于 2024-06-16 10:33:36 发布

倾云鹤

最新推荐文章于 2024-06-16 10:33:36 发布

阅读量585

点赞数 1

分类专栏： # H5边角料文章标签： html javascript 百度

本文链接：https://blog.csdn.net/qq_38779672/article/details/119873768

版权

H5边角料专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、效果图

在这里插入图片描述

二、详解

本质上为自定义Marker，使用css来做动画特效

有关通用模式相关操作，请看《百度地图3D地球接入》

1. 自定义CSS样式

ComplexCustomOverlay.css

.position_now{
    width: 30px;
    height: 30px;
    background-color: rgba(0, 250, 126, 0.9);
    border-radius: 25px;
}

.css_animation{
    height:30px;  
    width:30px;  
    border-radius: 25px;  
    background: rgba(0, 250, 126, 0.9);  
    transform: scale(0);  
    animation: myfirst 2s; /* 全程秒数 */
    animation-iteration-count: infinite;  
}

@keyframes myfirst{  
    to{  
        transform: scale(3); /* 扩散范围 */
        background: rgba(0, 0, 0, 0);  
    }
}

2. 自定义Marker

ComplexCustomOverlay.js

function ComplexCustomOverlay(point , marker){
	this._point = point;
	this._marker = marker;
}

ComplexCustomOverlay.prototype = new BMapGL.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
	this._map = map;
	var div = this._div = document.createElement("div");
	div.style.position = "absolute";
  
  /// 自定义扩散div，试过将css为position_now一起放，但是不生效，所以拆开成两个
	var arrow = this._arrow = document.createElement("div");
	arrow.style.position = "absolute"; 
	arrow.style.overflow = "hidden";
	arrow.classList.add("css_animation");
	div.appendChild(arrow);
	
	var arrow_now = this._arrow = document.createElement("div");
	arrow_now.style.position = "absolute"; 
	arrow_now.style.overflow = "hidden";
	arrow_now.classList.add("position_now");
	div.appendChild(arrow_now);

	 if(this._marker ){
		map.addOverlay(this._marker );
	} 

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

	return div;
}
ComplexCustomOverlay.prototype.draw = function(){
	var map = this._map;
	var pixel = map.pointToOverlayPixel(this._point);
	this._div.style.left = pixel.x - 25 + "px";
	this._div.style.top  = pixel.y - 25 + "px";
}

ComplexCustomOverlay.prototype.setPosition = function(point) {
	this._point = point ;
	this.draw();
	if(this._marker)
		this._marker.setPosition(this._point);
}

ComplexCustomOverlay.prototype.getPosition = function() {
	return this._point ;
}

3. 使用

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .anchorBL{display:none;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的Key"></script>
	<script>
      window.BMAP_AUTHENTIC_KEY = '7Cc5Kmn672miPzG4qQhvlOrERcXMMinq';
  </script>
  <script type="text/javascript" src="ComplexCustomOverlay.js"></script>
  <link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
	<title>地球模式</title>
	<style type="text/css">
	</style>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMapGL.Map("allmap");
	map.setMaxZoom(7.0);
	map.setMinZoom(2.0);
	map.centerAndZoom(new BMapGL.Point(104.195397, 35.86166), 2);
	map.enableScrollWheelZoom(true);
	map.setMapType(BMAP_EARTH_MAP);
	var pt = new BMapGL.Point(118.326443, 35.065282);
	var marker = new ComplexCustomOverlay(pt); /// 主要在这里
	map.addOverlay(marker);

	/// 当不在视野内，则需要隐藏的话，需要加如下
    map.addEventListener('moving', function (e) {
        var bound=map.getBounds();
        if (bound.containsPoint(marker._point)==false){
            map.removeOverlay(marker);
        } else {
            map.addOverlay(marker);
        }
    });
</script>

倾云鹤

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
百度地图3D地球闪动点(修复不在视野内时无法隐藏marker的bug)

一、效果图二、详解本质上为自定义Marker，使用css来做动画特效有关通用模式相关操作，请看《Flutter融云接入部分》1. 自定义CSS样式complex_custom_overlay.css.position_now{ width: 30px; height: 30px; background-color: rgba(0, 250, 126, 0.9); border-radius: 25px;}.css_animation{ he
复制链接

扫一扫