ufologist · March 3, 2014 14:59
diff --git a/baidu-map-quick-custom-overlay.html b/baidu-map-quick-custom-overlay.html
 <!doctype html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>百度地图 JavaScript API 极速版自定义覆盖物</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <style>
    body,
    html,
    #mapdemo {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
    }

    .header {
        position: absolute;
        width: 100%;
        margin: 0;
        padding: 0.3em;
        z-index: 1;
        background-color: #eee;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 28px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    }
    </style>
    <style>
    /* 自定义覆盖物的样式 */
    .checkpoint-overlay {
        position: absolute;
        white-space: nowrap;
        line-height: 25px;
        margin-left: -9px; /* 向左偏移补回图标占的位置 */
    }
    .checkpoint-overlay::before {
        position: absolute;
        content: " ";
        display: table;
        width: 23px;
        height: 25px;
        background: url(http://api0.map.bdimg.com/images/markers.png) 0 0 no-repeat;
    }
    .checkpoint-overlay-label {
        margin-left: 23px;
    }

    .notepoint-overlay {
        position: absolute;
        width: 19px;
        height: 19px;
        background: url(http://api0.map.bdimg.com/images/dest_markers.png) -216px -100px no-repeat;
    }
    </style>
 </head>
 <body>
    <h1 class="header">百度地图 JavaScript API 极速版自定义覆盖物</h1>
    <div id="mapdemo"></div>
    <script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
    <script>
    /**
     * 自定义方形覆盖物
     * 
     * @param {BMap.Point} mapPoint
     * @param {string} label
     * @param {string} className
     *
     * @author https://github.com/ufologist
     * @version 2014-03-03
     * @see http://developer.baidu.com/map/jsdemo.htm#c1_11
     */
    function RectangleOverlay(mapPoint, label, className) {
        this._mapPoint = mapPoint;
        this._label = label;
        this._className = className;
    }
    RectangleOverlay.prototype = new BMap.Overlay(); // 继承Overlay
    RectangleOverlay.prototype.initialize = function(map) {
        this._map = map;

        this._overlayEl = document.createElement('div');
        this._overlayEl.className = this._className;
        this._overlayEl.style.zIndex = BMap.Overlay.getZIndex(this._mapPoint.lat);

        this._labelEl = document.createElement('span');
        this._labelEl.className = this._className + '-label';
        this._labelEl.appendChild(document.createTextNode(this._label));
        this._overlayEl.appendChild(this._labelEl);

        this._map.getPanes().labelPane.appendChild(this._overlayEl);
        return this._overlayEl;
    };
    RectangleOverlay.prototype.draw = function() {
        // 按照正常位置来摆放自定义覆盖物会出现偏移现象
        // 因为覆盖物默认是以左上角为锚点"钉"在地图上的
        // |
        // | (覆盖物默认被定在这个点上,      
        // |  造成视觉上的偏移)       -------
        // |  v                      |     |
        // |  o------                o------
        // |  |     |                ^
        // |  -------                (而我们需要达到的效果如上, 锚点还是原来的位置,
        // |                          只是需要将覆盖物偏移)
        // |
        // 因此我们必须对原有的位置做一些偏移来修正定点的位置
        var pixel = this._map.pointToOverlayPixel(this._mapPoint);
        // 计算矩形偏移
        var style = window.getComputedStyle(this._overlayEl);
        var overlayHeight = parseInt(style.height, 10);
        this._overlayEl.style.left = pixel.x + 'px';
        this._overlayEl.style.top = (pixel.y - overlayHeight) + 'px';
    };

    /**
     * 自定义圆形覆盖物
     * 
     * @param {BMap.Point} mapPoint
     * @param {string} label
     * @param {string} className
     */
    function CircleOverlay(mapPoint, label, className) {
        RectangleOverlay.apply(this, arguments);
    }
    CircleOverlay.prototype = new RectangleOverlay(); // 继承方形覆盖物
    CircleOverlay.prototype.draw = function() {
        var pixel = this._map.pointToOverlayPixel(this._mapPoint);
        // 计算圆形偏移
        var style = window.getComputedStyle(this._overlayEl);
        var radius = parseInt(style.height, 10) / 2;
        this._overlayEl.style.left = (pixel.x - radius) + 'px';
        this._overlayEl.style.top = (pixel.y - radius) + 'px';
    };
    </script>
    <script>
    // 测试展现自定义覆盖物
    var map = new BMap.Map('mapdemo');
    var mapPoint = new BMap.Point(120.938934, 23.573065);
    map.centerAndZoom(mapPoint, 9);
    map.addControl(new BMap.ZoomControl());

    var rectangleOverlay = new RectangleOverlay(mapPoint, '方形覆盖物字很长不要换行', 'checkpoint-overlay');
    map.addOverlay(rectangleOverlay);
    // 对比看偏移是否正确
    map.addOverlay(new BMap.Marker(mapPoint));

    mapPoint = new BMap.Point(120.888934, 23.443065);
    var circleOverlay = new CircleOverlay(mapPoint, '', 'notepoint-overlay');
    map.addOverlay(circleOverlay);
    // 对比看偏移是否正确
    map.addOverlay(new BMap.Marker(mapPoint));
    </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>百度地图 JavaScript API 极速版自定义覆盖物</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />
	<style>
	body,
	html,
	#mapdemo {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	}

	.header {
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0.3em;
	z-index: 1;
	background-color: #eee;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 28px;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	}
	</style>
	<style>
	/* 自定义覆盖物的样式 */
	.checkpoint-overlay {
	position: absolute;
	white-space: nowrap;
	line-height: 25px;
	margin-left: -9px; /* 向左偏移补回图标占的位置 */
	}
	.checkpoint-overlay::before {
	position: absolute;
	content: " ";
	display: table;
	width: 23px;
	height: 25px;
	background: url(http://api0.map.bdimg.com/images/markers.png) 0 0 no-repeat;
	}
	.checkpoint-overlay-label {
	margin-left: 23px;
	}

	.notepoint-overlay {
	position: absolute;
	width: 19px;
	height: 19px;
	background: url(http://api0.map.bdimg.com/images/dest_markers.png) -216px -100px no-repeat;
	}
	</style>
	</head>
	<body>
	<h1 class="header">百度地图 JavaScript API 极速版自定义覆盖物</h1>
	<div id="mapdemo"></div>
	<script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
	<script>
	/**
	* 自定义方形覆盖物
	*
	* @param {BMap.Point} mapPoint
	* @param {string} label
	* @param {string} className
	*
	* @author https://github.com/ufologist
	* @version 2014-03-03
	* @see http://developer.baidu.com/map/jsdemo.htm#c1_11
	*/
	function RectangleOverlay(mapPoint, label, className) {
	this._mapPoint = mapPoint;
	this._label = label;
	this._className = className;
	}
	RectangleOverlay.prototype = new BMap.Overlay(); // 继承Overlay
	RectangleOverlay.prototype.initialize = function(map) {
	this._map = map;

	this._overlayEl = document.createElement('div');
	this._overlayEl.className = this._className;
	this._overlayEl.style.zIndex = BMap.Overlay.getZIndex(this._mapPoint.lat);

	this._labelEl = document.createElement('span');
	this._labelEl.className = this._className + '-label';
	this._labelEl.appendChild(document.createTextNode(this._label));
	this._overlayEl.appendChild(this._labelEl);

	this._map.getPanes().labelPane.appendChild(this._overlayEl);
	return this._overlayEl;
	};
	RectangleOverlay.prototype.draw = function() {
	// 按照正常位置来摆放自定义覆盖物会出现偏移现象
	// 因为覆盖物默认是以左上角为锚点"钉"在地图上的
	// \|
	// \| (覆盖物默认被定在这个点上,
	// \| 造成视觉上的偏移) -------
	// \| v \| \|
	// \| o------ o------
	// \| \| \| ^
	// \| ------- (而我们需要达到的效果如上, 锚点还是原来的位置,
	// \| 只是需要将覆盖物偏移)
	// \|
	// 因此我们必须对原有的位置做一些偏移来修正定点的位置
	var pixel = this._map.pointToOverlayPixel(this._mapPoint);
	// 计算矩形偏移
	var style = window.getComputedStyle(this._overlayEl);
	var overlayHeight = parseInt(style.height, 10);
	this._overlayEl.style.left = pixel.x + 'px';
	this._overlayEl.style.top = (pixel.y - overlayHeight) + 'px';
	};

	/**
	* 自定义圆形覆盖物
	*
	* @param {BMap.Point} mapPoint
	* @param {string} label
	* @param {string} className
	*/
	function CircleOverlay(mapPoint, label, className) {
	RectangleOverlay.apply(this, arguments);
	}
	CircleOverlay.prototype = new RectangleOverlay(); // 继承方形覆盖物
	CircleOverlay.prototype.draw = function() {
	var pixel = this._map.pointToOverlayPixel(this._mapPoint);
	// 计算圆形偏移
	var style = window.getComputedStyle(this._overlayEl);
	var radius = parseInt(style.height, 10) / 2;
	this._overlayEl.style.left = (pixel.x - radius) + 'px';
	this._overlayEl.style.top = (pixel.y - radius) + 'px';
	};
	</script>
	<script>
	// 测试展现自定义覆盖物
	var map = new BMap.Map('mapdemo');
	var mapPoint = new BMap.Point(120.938934, 23.573065);
	map.centerAndZoom(mapPoint, 9);
	map.addControl(new BMap.ZoomControl());

	var rectangleOverlay = new RectangleOverlay(mapPoint, '方形覆盖物字很长不要换行', 'checkpoint-overlay');
	map.addOverlay(rectangleOverlay);
	// 对比看偏移是否正确
	map.addOverlay(new BMap.Marker(mapPoint));

	mapPoint = new BMap.Point(120.888934, 23.443065);
	var circleOverlay = new CircleOverlay(mapPoint, '', 'notepoint-overlay');
	map.addOverlay(circleOverlay);
	// 对比看偏移是否正确
	map.addOverlay(new BMap.Marker(mapPoint));
	</script>
	</body>
	</html>
No results found