以前使用过百度地图，有一些需要对某些特定标记物进行高亮和醒目标记，因此采用css3对百度地图的marker组件进行动态效果调试，以下是简单记录。
1、 CSS3动画样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3测试</title>
<style type="text/css">
html{
height: 100%;
width: 100%;
overflow: hidden;
}
.css_animation{
height:50px;
width:50px;
border-radius: 25px;
background: rgba(250, 0, 0, 0.9);
transform: scale(0);
animation: myfirst 3s;
animation-iteration-count: infinite;
}
@keyframes myfirst{
to{
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}
</style>
</head>
<body>
<div id="c_test" class="css_animation"> </div>
</body>
</html>
效果如下：
baidu-marker1.gif
2、 扩展一个小组件，提供渲染css3和maker的方法，ComplexCustomOverlay.js
function ComplexCustomOverlay(point , marker){
this._point = point;
this._marker = marker;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
arrow.className="css_animation";
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 charset="UTF-8">
<title>CSS3_MARKER测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="ComplexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.map {
width: 100%;
height: 100%;
background: #d5e6f5;
position: absolute;
float: left;
}
</style>
</head>
<body>
<div id="map" class="map"> </div>
<script type="text/javascript">
var map;
window.onload = function() {
map = new BMap.Map('map'); // 创建Map实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//三个marker
var m1 = addMarker(120, 30);
map.addOverlay(m1);
};
function addMarker(_lon, _lat) {
var point = new BMap.Point(_lon, _lat);
var size = new BMap.Size(48, 48);
var marker = new BMap.Marker(point); // 创建标注
var plex = new ComplexCustomOverlay(point, marker); // 创建标注
return plex;
}
</script>
</body>
</html>
效果如下：
baidu-marker2.gif
4、 添加复杂效果，提供和其他maker的连线并动态移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS_MARKER2测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></script>
<script type="text/javascript" src="ComplexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
<style type="text/css">
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
border: 0px;
}
.map {
width: 100%;
height: 100%;
background: #d5e6f5;
position: absolute;
float: left;
}
</style>
</head>
<body>
<div id="map" class="map"> </div>
<script type="text/javascript">
var map;
var index = 0;
var add = 0.01;
window.onload = function() {
map = new BMap.Map('map'); // 创建Map实例
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//三个marker
var m1 = addMarker(120, 30);
var m2 = addMarker(121, 30);
var m3 = addMarker(120, 31);
//无人机
var m4 = addMarker(121, 31);
map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(m3);
map.addOverlay(m4);
var l1 = new BMap.Polyline([ new BMap.Point(120, 30),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
var l2 = new BMap.Polyline([ new BMap.Point(121, 30),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
var l3 = new BMap.Polyline([ new BMap.Point(120, 31),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //创建折线
map.addOverlay(l1); //增加折线
map.addOverlay(l2); //增加折线
map.addOverlay(l3); //增加折线
setInterval(function() {
indexindex = index + 1;
var old_p = m4.getPosition();
var lon = old_p.lng - add;
var lat = old_p.lat - add;
if (Math.abs(index) > 100) {
addadd = add * -1;
index = 0;
}
//修改线和位置
var p = new BMap.Point(lon, lat);
l1.setPositionAt(1, p);
l2.setPositionAt(1, p);
l3.setPositionAt(1, p);
m4.setPosition(p);
}, 100);
};
function addMarker(_lon, _lat) {
var point = new BMap.Point(_lon, _lat);
var size = new BMap.Size(48, 48);
var marker = new BMap.Marker(point); // 创建标注
var plex = new ComplexCustomOverlay(point, marker); // 创建标注
return plex;
}
</script>
</body>
</html>
效果如下：
baidu-marker3.gif
