20150107

Fwd: 百度地图坐标偏移的纠正

>
> 百度地图坐标偏移的纠正
>
> 1. 问题
>
> 在使用百度地图开发时,输入经纬度 (用google earth或GPS设备得到) ,会发现坐标显示位置偏移。
>
> 比如,已知东北师范大学经纬度 125.3249352, 43.8593245。经纬度可以通过地理科学学院门口的雕塑上查到,可以通过google earth查到,可以通过能显示经纬度的GPS设备,或者用iphone在东北师大拍张照片,然后用带有识别exif的工具比如 google picasa查到。
>
> 在下述代码1中,我们发现,标记 125.3249352, 43.8593245 的位置不在东北师大,而是偏移到了南湖里。
>
> -----代码1开始--------
>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <style type="text/css">
> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
> #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
> #r-result{height:100%;width:20%;float:left;}
> </style>
> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
> <title>baidu map demo</title>
> </head>
> <body>
> <div id="allmap"></div>
> </body>
> </html>
> <script type="text/javascript">
> var map = new BMap.Map("allmap"); // 创建Map实例
> var point = new BMap.Point(125.3249352, 43.8593245); // 创建点坐标
>
> var marker = new BMap.Marker (point);
> marker.setTitle ("This is a Marker.");
> map.addOverlay (marker);
>
> map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
> map.enableScrollWheelZoom(); //启用滚轮放大缩小
>
> map.addEventListener('click', function(e){
> console.log(e.point);
> });
> </script>
>
>
> -----代码1结束--------
>
> 对于坐标偏移,百度的官方解释是 国家要求 + 百度的二次加密。百度支持把其
> 他坐标 (google的, gps设备的)转换为百度地图的坐标,这样显示在百度地图上
> 的标记位置就不偏移了。
>
> 2. 解决
>
> 使用下述代码,在百度地图上,标记点的位置是正确的。
>
> 下述代码抄自网络并修改,最初来源已不可考。谢谢原作者。
>
> 代码2在代码1的基础上做了修改,调用了百度的API[http://api.map.baidu.com/api?v=1.4],及[convertor.js]即代码3。
>
> 用到了 javascript的闭包和回调。
>
> ------代码2开始------
>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <style type="text/css">
> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
> #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
> #r-result{height:100%;width:20%;float:left;}
> </style>
> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
> <script type="text/javascript" src="convertor.js"></script>
> <title>baidu map demo</title>
> </head>
> <body>
> <div id="allmap"></div>
> </body>
> </html>
>
> <script type="text/javascript">
>
> var map = new BMap.Map("allmap"); // 创建Map实例
>
>
> var point = new BMap.Point(125.3249352, 43.8593245); // 创建点坐标
> BMap.Convertor.translate(point, 0, function(point){
>
> var marker = new BMap.Marker (point);
> marker.setTitle ("This is a marker");
> map.addOverlay (marker);
>
> map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。
> map.enableScrollWheelZoom(); //启用滚轮放大缩小
>
> map.addEventListener('click', function(e){
> console.log(e.point);})
>
> });
> ;
> </script>
>
>
> ------代码2结束------
>
> ------代码3开始------
>
> //2011-7-25
> (function(){ //闭包
> function load_script(xyUrl, callback){
> var head = document.getElementsByTagName('head')[0];
> var script = document.createElement('script');
> script.type = 'text/javascript';
> script.src = xyUrl;
> //借鉴了jQuery的script跨域方法
> script.onload = script.onreadystatechange = function(){
> if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
> callback && callback();
> // Handle memory leak in IE
> script.onload = script.onreadystatechange = null;
> if ( head && script.parentNode ) {
> head.removeChild( script );
> }
> }
> };
> // Use insertBefore instead of appendChild to circumvent an IE6 bug.
> head.insertBefore( script, head.firstChild );
> }
> function translate(point,type,callback){
> var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名
> var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
> //动态创建script标签
> load_script(xyUrl);
> BMap.Convertor[callbackName] = function(xyResult){
> delete BMap.Convertor[callbackName]; //调用完需要删除改函数
> var point = new BMap.Point(xyResult.x, xyResult.y);
> callback && callback(point);
> }
> }
>
> window.BMap = window.BMap || {};
> BMap.Convertor = {};
> BMap.Convertor.translate = translate;
> })();
>
>
> ------代码3结束------
>
> 4. 完整代码在[http://download.csdn.net/detail/younggift/8334749]。
>
> 参考:
> 1. [http://www.cnblogs.com/funnydavid/archive/2011/03/02/1969244.html]
>
> 2. 百度的解释
> [http://developer.baidu.com/map/question.htm]
> 百度坐标为何有偏移?
>
> 国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。
>
> 如何从其他体系的坐标迁移到百度坐标?
>
> 开发者可以使用坐标转换接口进行转换。JavaScript API 、Android SDK、iOS SDK的开发用户可直接调用相应方法进行转换。
>
> 3. 百度的手册
> [http://developer.baidu.com/map/changeposition.htm]
>
> ------------------------------------------------------------
>
> 博客会手工同步到以下地址:
>
> [http://giftdotyoung.blogspot.com]
>
> [http://blog.csdn.net/younggift]
>

20150103

Fwd: 网页内联图片 html inline image


网页内联图片 html inline image

不是像这样,
<img src="http://www.nenu.edu.cn/xiaohui.png">

上述代码中,图片是独立于HTML而存在于另一个URL的。

内联是像下面这样,图片是HTML的一部分,这样适合用代码生成,或者javascript改写。
把下面的代码保存为 html 文档,用浏览器打开,可见效果。

参考:

[http://stackoverflow.com/questions/1207190/embedding-base64-images]

[http://www.bigfastblog.com/embed-base64-encoded-images-inline-in-html]

[http://base64image.org/]


-----代码开始-------------

<img alt="Embedded Image" src="data:image/png;base64,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" />

-----代码开始-------------

------------------------------------------------------------

博客会手工同步到以下地址:

[http://giftdotyoung.blogspot.com]

[http://blog.csdn.net/younggift]

网页内联图片 html inline image

不是像这样,
<img src="http://www.nenu.edu.cn/xiaohui.png">

上述代码中,图片是独立于HTML而存在于另一个URL的。

内联是像下面这样,图片是HTML的一部分,这样适合用代码生成,或者javascript改写。
把下面的代码保存为 html 文档,用浏览器打开,可见效果。

参考:

[http://stackoverflow.com/questions/1207190/embedding-base64-images]

[http://www.bigfastblog.com/embed-base64-encoded-images-inline-in-html]

[http://base64image.org/]


-----代码开始-------------

<img alt="Embedded Image" src="data:image/png;base64,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" />

-----代码开始-------------

------------------------------------------------------------

博客会手工同步到以下地址:

[http://giftdotyoung.blogspot.com]

[http://blog.csdn.net/younggift]

发自我的 iPhone
发自我的 iPhone