百度地图 坐标偏移、覆盖物偏移解决方案

本文介绍如何解决百度地图定位不准确的问题,提供单个坐标及批量坐标转换的JavaScript代码示例,帮助开发者快速实现坐标系之间的转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

百度地图定位不准确,这个问题困扰我一整天,想来度娘是强大的,各种查询总于找到解决方案,其实就是将经纬度转换为百度地图识别的经纬度,是不是很扯。

网址

http://developer.baidu.com/map/jsdemo/demo/convertor.js     这是单个坐标转换接口

http://developer.baidu.com/map/jsdemo/demo/changeMore.js   这是批量转换接口


1,单个转换函数


//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;  
})();  


2, 批量转换函数


//2011-7-25 zhangying  
(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 transMore(points,type,callback){  
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&mode=1";  
    var xs = [];  
    var ys = [];  
    var maxCnt = 20;//每次发送的最大个数  
    var send = function(){  
        var url = xyUrl + "&x=" + xs.join(",") + "&y=" + ys.join(",") + "&callback=callback";  
        //动态创建script标签  
        load_script(url);  
        xs = [];  
        ys = [];  
    }  
    for(var index in points){  
        if(index % maxCnt == 0 && index != 0){  
            send();  
        }  
        xs.push(points[index].lng);  
        ys.push(points[index].lat);  
        if(index == points.length - 1){  
            send();  
        }  
    }  
      
}  
  
window.BMap = window.BMap || {};  
BMap.Convertor = {};  
BMap.Convertor.transMore = transMore;  
})();  

3,单个转换函数与批量转换函数 整合体


(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);  
    };  
}  
  
function transMore(points,type,callback){//批量转换  
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&mode=1";  
    var xs = [];  
    var ys = [];  
    var maxCnt = 30;//每次发送的最大个数  
    var send = function(){  
        var url = xyUrl + "&x=" + xs.join(",") + "&y=" + ys.join(",") + "&callback=callback";  
        //动态创建script标签  
        load_script(url);  
        xs = [];  
        ys = [];  
    };  
    for(var index in points){  
        if(index % maxCnt == 0 && index != 0){  
            send();  
        }  
        xs.push(points[index].lng);  
        ys.push(points[index].lat);  
        if(index == points.length - 1){  
            send();  
        }  
    }  
      
}  
  
window.BMap = window.BMap || {};  
BMap.Convertor = {};  
BMap.Convertor.translate = translate;  
BMap.Convertor.transMore = transMore;  
})(); 


另外附上两个接口使用的示例源代码

单个转换的接口

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  6. <style type="text/css">  
  7. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  
  8. </style>  
  9. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>  
  10. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>  
  11. <title>GPS转百度</title>  
  12. </head>  
  13. <body>  
  14. <div id="allmap"></div>  
  15. </body>  
  16. </html>  
  17. <script type="text/javascript">  
  18.   
  19. // 百度地图API功能  
  20. //GPS坐标  
  21. var xx = 116.397428;  
  22. var yy = 39.90923;  
  23. var gpsPoint = new BMap.Point(xx,yy);  
  24.   
  25. //地图初始化  
  26. var bm = new BMap.Map("allmap");  
  27. bm.centerAndZoom(gpsPoint, 15);  
  28. bm.addControl(new BMap.NavigationControl());  
  29.   
  30. //添加谷歌marker和label  
  31. var markergps = new BMap.Marker(gpsPoint);  
  32. bm.addOverlay(markergps); //添加GPS标注  
  33. var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)});  
  34. markergps.setLabel(labelgps); //添加GPS标注  
  35.   
  36. //坐标转换完之后的回调函数  
  37. translateCallback = function (point){  
  38.     var marker = new BMap.Marker(point);  
  39.     bm.addOverlay(marker);  
  40.     var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)});  
  41.     marker.setLabel(label); //添加百度label  
  42.     bm.setCenter(point);  
  43.     alert(point.lng + "," + point.lat);  
  44. }  
  45.   
  46. setTimeout(function(){  
  47.     BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标  
  48. }, 2000);  
  49. </script>  


批量转换的示例接口

[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  6. <style type="text/css">  
  7. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  
  8. </style>  
  9. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>  
  10. <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>  
  11. <title>批量坐标转换</title>  
  12. </head>  
  13. <body>  
  14. <div id="allmap"></div>  
  15. </body>  
  16. </html>  
  17. <script type="text/javascript">  
  18.   
  19. // 百度地图API功能  
  20. var map = new BMap.Map("allmap");  
  21. map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  
  22. var i;  
  23. var markers = [];  
  24. map.addEventListener("click",function(e){  
  25.     alert(e.point.lng + "," + e.point.lat);  
  26. });  
  27. //注意:百度和谷歌的经纬度坐标顺序是相反的。  
  28. var points = [new BMap.Point(116.3786889372559,39.90762965106183),  
  29.               new BMap.Point(116.38632786853032,39.90795884517671),  
  30.               new BMap.Point(116.39534009082035,39.907432133833574),  
  31.               new BMap.Point(116.40624058825688,39.90789300648029),  
  32.               new BMap.Point(116.41413701159672,39.90795884517671)  
  33.              ];  
  34. function callback(xyResults){  
  35.  var xyResult = null;  
  36.  for(var index in xyResults){  
  37.   xyResult = xyResults[index];  
  38.   if(xyResult.error != 0){continue;}//出错就直接返回;  
  39.   var point = new BMap.Point(xyResult.x, xyResult.y);  
  40.      var marker = new BMap.Marker(point);  
  41.      map.addOverlay(marker);  
  42.      map.setCenter(point);// 由于写了这句,每一个被设置的点都是中心点的过程  
  43.     }  
  44. }  
  45.   
  46. setTimeout(function(){  
  47.     BMap.Convertor.transMore(points,2,callback);        //一秒之后开始进行坐标转换。参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标  
  48. }, 1000);  
  49. </script>  
本文转载地址: 点击打开链接




















<think>嗯,用户的问题是关于在HTML地图上添加文字标注。首先,我需要考虑用户提到的几种引用,特别是百度地图和Leaflet的使用。用户可能刚开始学习,所以需要步骤清晰的指导,并且要确保示例代码正确。 首先,用户提到了百度地图的API,引用[1]和[3]都是关于百度地图的标注和文本标签。引用[3]中提到了使用label来添加文本,并且控制显示时机,比如鼠标移入时显示。这可能是一个方法,需要详细说明如何创建标注点并添加label,以及如何设置事件监听器。 然后,引用[2]提到了Leaflet的TextPath插件,用于在路径上添加文字。用户可能对Leaflet也感兴趣,所以需要提供两种方法的示例:一种是百度地图,另一种是Leaflet。这样用户可以根据自己的需求选择适合的库。 接下来,我需要确保代码示例符合用户的要求,比如在百度地图中,如何让文字标注在鼠标移入时显示,并且调整样式,比如透明背景。而在Leaflet中,如何添加静态文本标注和使用TextPath插件动态添加路径文字。 还要注意用户提到的结构:标题、左右分块的地图,右侧文字说明。虽然代码示例可能不需要完整结构,但需要给出如何在左侧地图部分添加标注的代码片段。 可能需要分步骤说明,比如选择地图库、添加标注点、添加文字、控制显示逻辑。同时,确保LaTeX格式正确,但问题中没有数学公式,所以可能不需要处理这点。不过要检查是否有其他需要格式化的部分。 最后,生成相关问题,帮助用户深入理解,比如不同地图库的对比、动态数据绑定、性能优化等。确保引用正确,每个引用在回答中适当提及,比如百度地图的方法引用[1]和[3],Leaflet的方法引用[2]。 总结:需要提供两种方法的代码示例,分别针对百度地图和Leaflet,说明如何添加文字标注,并附上相关问题。确保步骤清晰,代码正确,适合初学者理解。</think>### HTML地图文字标注实现方法 根据需求描述和引用资料,以下是两种常用实现方式: 一、百度地图API实现方法(适合国内地图服务) ```html <div id="mapContainer"></div> <script> // 初始化地图 var map = new BMap.Map("mapContainer"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建标注点 var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建文字标签配置 var labelOptions = { offset: new BMap.Size(20, -10), // 偏移量 position: marker.getPosition(), // 与标注点同位置 enableMassClear: false // 防止被清除 }; // 创建文本标签对象 var label = new BMap.Label("这是标注文字", labelOptions); // 设置标签样式 label.setStyle({ color: "#333", border: "none", // 去掉边框 [^3] backgroundColor: "transparent" // 透明背景 [^3] }); // 添加事件交互 marker.addEventListener("mouseover", function(){ map.addOverlay(label); // 显示标签 }); marker.addEventListener("mouseout", function(){ map.removeOverlay(label); // 隐藏标签 [^3] }); map.addOverlay(marker); </script> ``` 二、Leaflet实现方法(适合开源地图) ```html <div id="map" style="height: 400px;"></div> <script> // 初始化地图 var map = L.map('map').setView([51.505, -0.09], 13); // 添加静态文字标注 L.marker([51.5, -0.09]).bindTooltip("固定标注文字", { permanent: true, // 始终显示 direction: 'right', // 显示方向 className: 'text-label' // 自定义样式类 }).addTo(map); // 动态路径文字标注(使用TextPath插件)[^2] var polyLine = L.polyline([ [51.5, -0.09], [51.51, -0.1], [51.49, -0.1] ], {color: 'red'}).addTo(map); polyLine.setText("路径标注文字", { align: 'center', // 文字对齐方式 [^2] offset: 5, // 垂直偏移量 attributes: {fill: 'blue'} }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值