ufologist · April 16, 2014 08:47
diff --git a/baidu-map-quick-animation-marker.html b/baidu-map-quick-animation-marker.html
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>百度地图 JavaScript API 极速版带动画的标注点</title>
    <style>
    .map {
        width: 500px;
        height: 300px;
    }

    .bounce-in-down {
        -webkit-animation: bounceInDown 400ms infinite ease-in alternate;
    }
    /**
     * 实现大众版中的动画标注点中的动画(参考animate.css)
     * marker.setAnimation(BMAP_ANIMATION_BOUNCE);
     */
    @-webkit-keyframes bounceInDown {
        0% {
            -webkit-transform: translateY(-20px);
        }
        100% {
            -webkit-transform: translateY(0);
        }
    }
    </style>
 </head>
 <body>
    <h1>百度地图 JavaScript API 极速版带动画的标注点</h1>
    <div class="map"></div>
    <script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
    <script>
    /**
     * 可自定义CSS样式的标注点.
     *
     * 我们可以通过这种方式(使用 CSS3 Animation 样式),
     * 基于百度地图 JavaScript API 极速版 V1.0 实现带动画的Marker.
     * 由于极速版没有这个功能(JavaScript API 大众版自带这个功能), 因此只能自己实现了.
     * http://developer.baidu.com/map/jsdemo.htm#c1_2
     * 
     * @param {BMap.Point} point
     * @param {object} options {className: 'css-class'}
     * 
     * @extend BMap.Marker
     * @version 0.1.0 2014-4-16
     * @author Sun
     */
    function StyleMarker(point, options) {
        options = options || {};
        BMap.Marker.apply(this, arguments);
        this.className = options.className;
    }
    StyleMarker.prototype = new BMap.Marker();
    StyleMarker.prototype.constructor = StyleMarker;
    StyleMarker.prototype.initialize = function(map) {
        BMap.Marker.prototype.initialize.apply(this, arguments);
        this.addClass();
        return this.domElement;
    };
    StyleMarker.prototype.addClass = function() {
        var iconDom = this.iconDom;
        if (!iconDom) {
            return;
        }

        iconDom.className += this.className;
    };




    var map = new BMap.Map(document.querySelector('.map'), {
        enableMapClick: false
    });
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    // 动画标注点
    var styleMarker = new StyleMarker(point, {
        className: 'bounce-in-down'
    });
    map.addOverlay(styleMarker);
    </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版带动画的标注点</title>
	<style>
	.map {
	width: 500px;
	height: 300px;
	}

	.bounce-in-down {
	-webkit-animation: bounceInDown 400ms infinite ease-in alternate;
	}
	/**
	* 实现大众版中的动画标注点中的动画(参考animate.css)
	* marker.setAnimation(BMAP_ANIMATION_BOUNCE);
	*/
	@-webkit-keyframes bounceInDown {
	0% {
	-webkit-transform: translateY(-20px);
	}
	100% {
	-webkit-transform: translateY(0);
	}
	}
	</style>
	</head>
	<body>
	<h1>百度地图 JavaScript API 极速版带动画的标注点</h1>
	<div class="map"></div>
	<script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
	<script>
	/**
	* 可自定义CSS样式的标注点.
	*
	* 我们可以通过这种方式(使用 CSS3 Animation 样式),
	* 基于百度地图 JavaScript API 极速版 V1.0 实现带动画的Marker.
	* 由于极速版没有这个功能(JavaScript API 大众版自带这个功能), 因此只能自己实现了.
	* http://developer.baidu.com/map/jsdemo.htm#c1_2
	*
	* @param {BMap.Point} point
	* @param {object} options {className: 'css-class'}
	*
	* @extend BMap.Marker
	* @version 0.1.0 2014-4-16
	* @author Sun
	*/
	function StyleMarker(point, options) {
	options = options \|\| {};
	BMap.Marker.apply(this, arguments);
	this.className = options.className;
	}
	StyleMarker.prototype = new BMap.Marker();
	StyleMarker.prototype.constructor = StyleMarker;
	StyleMarker.prototype.initialize = function(map) {
	BMap.Marker.prototype.initialize.apply(this, arguments);
	this.addClass();
	return this.domElement;
	};
	StyleMarker.prototype.addClass = function() {
	var iconDom = this.iconDom;
	if (!iconDom) {
	return;
	}

	iconDom.className += this.className;
	};




	var map = new BMap.Map(document.querySelector('.map'), {
	enableMapClick: false
	});
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);

	// 动画标注点
	var styleMarker = new StyleMarker(point, {
	className: 'bounce-in-down'
	});
	map.addOverlay(styleMarker);
	</script>
	</body>
	</html>