ufologist · September 3, 2014 08:12
diff --git a/baidu-map-click-offset.html b/baidu-map-click-offset.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>修正百度地图pinch zoom in后的偏移</title>
    <style>
    html,
    body,
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
    }
    .header {
        position: absolute;
        z-index: 1;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1.4em;
        text-align: center;
        color: #555;
        text-shadow: 1px 2px 3px #ccc;
    }
    .geo-address {
        padding: 10px 5px;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        font-size: 0.6em;
        font-style: normal;
        color: #fff;
        text-shadow: 1px 2px 3px #aaa;
    }
    </style>
 </head>
 <body>
    <h1 class="header">&gt; 修正百度地图pinch zoom in后的偏移 &lt;<address class="geo-address"></address></h1>
    <div id="allmap"></div>
    <script src="http://api.map.baidu.com/api?type=quick&ak={您的密钥}&v=1.0"></script>
    <script>
        var map = new BMap.Map('allmap');
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        map.addControl(new BMap.ZoomControl());

        // XXX 解决地图定位偏移的问题
        // 地图通过手势(pinch zoom in)放大后, 点击地图获取的经纬度(坐标点)会有偏移,
        // 造成在地图上绘制的marker偏移.
        // 经测试发现, 其实地图zoom in后, 地图的中心点并没有改变(还是未zoom in时的中心点),
        // 因此在这之后点击地图, 都是获取到的上一个视野的点, 不偏移才怪.
        // 这个时候只要小小的平移下地图, 即可修正这个错误.
        // 
        // 因此解决办法就是: 每次zoom完后自动平移下地图
        map.addEventListener('zoomend', function() {
            var p = map.getCenter();
            console.log('zoomend', p);
            // 测试后得出的平移最小精度
            // 如果设置更小的精度就没有办法完成"小小平移下地图"的动作,
            // 有可能是百度地图做了平移的限制
            p.lng += 0.00001;
            try {
                // 地图在panTo的时候有可能出现异常
                map.panTo(p);
            } catch (e) {
                console.error(e.message);
            }
        });

        // 点击地图定位
        var gc = new BMap.Geocoder();
        map.addEventListener('click', function(e) {
            var pt = e.point;
            // 点击marker与地图点击冲突, 会同时进行, 需要添加一个条件来判断
            gc.getLocation(pt, function(rs) {
                map.clearOverlays();

                document.querySelector('.geo-address').innerHTML = rs.address + ': ' + pt.lng + ',' + pt.lat;
                map.addOverlay(new BMap.Marker(pt));
            });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>修正百度地图pinch zoom in后的偏移</title>
	<style>
	html,
	body,
	#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	}
	.header {
	position: absolute;
	z-index: 1;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.4em;
	text-align: center;
	color: #555;
	text-shadow: 1px 2px 3px #ccc;
	}
	.geo-address {
	padding: 10px 5px;
	width: 100%;
	background-color: rgba(0,0,0,0.3);
	font-size: 0.6em;
	font-style: normal;
	color: #fff;
	text-shadow: 1px 2px 3px #aaa;
	}
	</style>
	</head>
	<body>
	<h1 class="header">> 修正百度地图pinch zoom in后的偏移 <<address class="geo-address"></address></h1>
	<div id="allmap"></div>
	<script src="http://api.map.baidu.com/api?type=quick&ak={您的密钥}&v=1.0"></script>
	<script>
	var map = new BMap.Map('allmap');
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	map.addControl(new BMap.ZoomControl());

	// XXX 解决地图定位偏移的问题
	// 地图通过手势(pinch zoom in)放大后, 点击地图获取的经纬度(坐标点)会有偏移,
	// 造成在地图上绘制的marker偏移.
	// 经测试发现, 其实地图zoom in后, 地图的中心点并没有改变(还是未zoom in时的中心点),
	// 因此在这之后点击地图, 都是获取到的上一个视野的点, 不偏移才怪.
	// 这个时候只要小小的平移下地图, 即可修正这个错误.
	//
	// 因此解决办法就是: 每次zoom完后自动平移下地图
	map.addEventListener('zoomend', function() {
	var p = map.getCenter();
	console.log('zoomend', p);
	// 测试后得出的平移最小精度
	// 如果设置更小的精度就没有办法完成"小小平移下地图"的动作,
	// 有可能是百度地图做了平移的限制
	p.lng += 0.00001;
	try {
	// 地图在panTo的时候有可能出现异常
	map.panTo(p);
	} catch (e) {
	console.error(e.message);
	}
	});

	// 点击地图定位
	var gc = new BMap.Geocoder();
	map.addEventListener('click', function(e) {
	var pt = e.point;
	// 点击marker与地图点击冲突, 会同时进行, 需要添加一个条件来判断
	gc.getLocation(pt, function(rs) {
	map.clearOverlays();

	document.querySelector('.geo-address').innerHTML = rs.address + ': ' + pt.lng + ',' + pt.lat;
	map.addOverlay(new BMap.Marker(pt));
	});
	});
	</script>
	</body>
	</html>