一、效果图
二、详解
本质上为自定义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>