I recently started using Baidu Maps, and I need to add some flickering animations to the markers to make some highlights or obvious prompts to customers. Therefore, the animation effects are processed based on css3, and the markers are processed by maker. The following is a simple record.
1. Extend css3
The test css3 code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Test</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>
actual effect:
2. Extend js to provide methods for rendering css3 and 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. Call the test
<!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'); // create a Map instance
map.enableScrollWheelZoom(true); //Enable mouse wheel zoom
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//Three markers
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); // create a marker
var plex = new ComplexCustomOverlay(point, marker); // create label
return plex;
}
</script>
</body>
</html>
actual effect:
4. Add complex effects, provide connections with other makers and move dynamically:
<!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'); // create a Map instance
map.enableScrollWheelZoom(true); //Enable mouse wheel zoom
var point = new BMap.Point(120, 30);//, 11
map.centerAndZoom(point, 9);
//Three markers
var m1 = addMarker (120, 30);
var m2 = addMarker (121, 30);
var m3 = addMarker(120, 31);
// drone
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
}); //Create a polyline
var l2 = new BMap.Polyline([ new BMap.Point(121, 30),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //Create a polyline
var l3 = new BMap.Polyline([ new BMap.Point(120, 31),
new BMap.Point(121, 31) ], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.8
}); //Create a polyline
map.addOverlay(l1); //Add polyline
map.addOverlay(l2); //Add polyline
map.addOverlay(l3); //Add polyline
setInterval(function() {
index = index + 1;
var old_p = m4.getPosition();
var lon = old_p.lng - add;
var lat = old_p.lat - add;
if (Math.abs(index) > 100) {
add = add * -1;
index = 0;
}
//modify line and position
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); // create a marker
var plex = new ComplexCustomOverlay(point, marker); // create label
return plex;
}
</script>
</body>
</html>
actual effect:
