百度地图坐标转换及跨域

喜你入骨 提交于 2019-12-02 05:43:24
  1. 前言
    调用 api将实际经纬度转换为百度坐标系的经纬度。
  2. 想要的效果
    效果如图,左侧为百度地图,需要与右侧地图联动。
    左侧为百度地图,右侧为arcgis服务
    通过百度地图离线js调用,总是报跨域错误。以为是js版本不对,查了一下没问题。
    网友这种方式处理的回调函数根本不起作用
 //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        bm.addOverlay(marker);
        var label = new BMap.Label("转换后的百度坐标(正确)",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        bm.setCenter(data.points[0]);
      }
    }

    setTimeout(function(){
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 1, 5, translateCallback)
    }, 1000);

过程没有截图。就不晒出来了。跟代码的结果是:执行了

convertor.translate(pointArr, 1, 5, translateCallback)

但是回调函数translateCallback根本不执行。
分析原因可能是找不到回调的函数。由于这个项目前端用dojo+js面向对象编程。只能在js外部定义回调函数才能正常解析请求结果

//定义源坐标投影
var projection84 = '+proj=longlat +datum=WGS84 +no_defs';
//定义目标坐标投影
var projection2000 = "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs";
// 这里的point为右侧地图的中心点 通过proj4将2000转成84
var xy2000 = [point.x, point.y]
var xy84 = proj4(projection2000, projection84, xy2000);
console.log("jsonP调用百度API将实际经纬度转换为百度坐标系的经纬度");
// jsonP回调的函数showLocation在本文件最底端
var baiduurl = "http://api.map.baidu.com/geoconv/v1/?coords=" + xy84[0] + "," + xy84[1] + "&from=1&to=5&ak=你的秘钥&callback=showLocation"
$.getScript(baiduurl);

回调函数写在js文件的最外边,以便识别到回调方法
回调函数必须保证能被识别到
回调函数代码如下:

 
// 84坐标转百度坐标回调方法
function showLocation(data) {
    var gh = GisHelper.getInstance();
    var mapFen = gh._Map;
    var map = new BMap.Map("BaiDuMap");
    var num;
    var bl = mapFen.getScale();
     if (1510 < bl ) {
        num = 19;
    }
    else if (bl < 1510) {
        num = 20;
    }
    var point = new BMap.Point(data.result[0].x,data.result[0].y);
    // 根据转换后的点和右侧地图缩放比例加载百度地图
    map.centerAndZoom(point, num);
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!