zoukankan      html  css  js  c++  java
  • 【百度地图API】如何批量转换为百度经纬度

    摘要:

         百度地图API的官网上提供了常用坐标转换的示例。但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考。

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

    因为我没有GPS坐标,就拿谷歌坐标做个示例了。

    首先要注意的是,百度和谷歌的经纬度坐标顺序是相反的。

    比如,谷歌的经纬度是

    new google.maps.LatLng(39.90762965106183, 116.3786889372559)

    传入坐标转换接口的百度经纬度应该是

    new BMap.Point(116.3786889372559,39.90762965106183)

    所以,我建立一个数组,存放转换前的经纬度。创建百度的坐标点,但是用谷歌的经纬度。

    //注意:百度和谷歌的经纬度坐标顺序是相反的。
    var points = [new BMap.Point(116.3786889372559,39.90762965106183),
    new BMap.Point(116.38632786853032,39.90795884517671),
    new BMap.Point(116.39534009082035,39.907432133833574),
    new BMap.Point(116.40624058825688,39.90789300648029),
    new BMap.Point(116.41413701159672,39.90795884517671)
    ];



    然后调用官方公布的接口

    BMap.Convertor.transMore(points,2,callback);

    自己对这个坐标转换接口做了修改,让它可以多次返回结果。注意看注释部分。

    据说,百度坐标转换接口,有50次/秒的限制。

    function transMore(points,type,callback){
    for(var index in points){
    if(index > 50){return;}
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +
    "&to=4&x=" + points[index].lng + //这里要循环读入数组points的lng数据,直到points.length完毕。
    "&y=" + points[index].lat +
    "&callback=callback";
    //动态创建script标签
    load_script(xyUrl);
    }
    }



    进过上一步,坐标就转换好了。成为百度坐标了。但这时的百度坐标是加密的。看不懂……

    好在,我们可以直接利用这些加密的编码创建出Marker标注点。获取到对象后,直接使用即可。

    function callback(xyResult){ 
    if(xyResult.error != 0){return;}//出错就直接返回;
    var point = new BMap.Point(xyResult.x, xyResult.y);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.setCenter(point);// 由于写了这句,可以每一个被转的点都是中心点的过程
    }

    到这里,批量转换就讲完啦~~

    下面说说我自己添加的其他功能:如何获取地图上的坐标点。

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

    如何获取地图上的坐标点,经纬度?

    先说说谷歌的:给地图添加事件,点击地图后直接弹出。

    google.maps.event.addListener(map, 'click', function(e) {
    alert(e.latLng);
    });

    在说说百度的,也是给地图添加事件。

    map.addEventListener("click",function(e){
    alert(e.point.lng + "," + e.point.lat);
    });



    大家发现谷歌和百度有什么不同了没有?

    对了,谷歌的经纬度像是封装在一起了样。而百度的经纬度是分开地~~~


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

    全部源代码:

    有两个文件,一个是htm,另一个是修改后的官方坐标转换js。

    批量转换.htm
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript" src="changeMore.js"></script>
    <title>批量转换坐标</title>
    </head>
    <body>
    <input onclick="magic();" value="批量转换" type="button" />(据说有50次/秒的限制哦)<hr />
    <div style="clear:both">
    <div style="float:left;">
    <h4>谷歌地图</h4>
    <div style="520px;height:340px;border:1px solid gray" id="map_canvas"></div>
    <p>鼠标点击的谷歌坐标是:<span id="info"></span></p>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
    var myOptions = {
    zoom:
    14,
    center:
    new google.maps.LatLng(39.90861722866082, 116.39679921252446),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
    google.maps.event.addListener(map,
    'click', function(e) {
    document.getElementById(
    "info").innerHTML = e.latLng;
    });
    var marker1 = new google.maps.Marker({
    position:
    new google.maps.LatLng(39.90762965106183, 116.3786889372559),
    map: map
    });
    var marker2 = new google.maps.Marker({
    position:
    new google.maps.LatLng(39.90795884517671, 116.38632786853032),
    map: map
    });
    var marker3 = new google.maps.Marker({
    position:
    new google.maps.LatLng(39.907432133833574, 116.39534009082035),
    map: map
    });
    var marker4 = new google.maps.Marker({
    position:
    new google.maps.LatLng(39.90789300648029, 116.40624058825688),
    map: map
    });
    var marker5 = new google.maps.Marker({
    position:
    new google.maps.LatLng(39.90795884517671, 116.41413701159672),
    map: map
    });
    }
    google.maps.event.addDomListener(window,
    'load', initialize);
    </script>
    </div>
    <div style="float:left;">
    <h4>百度地图</h4>
    <div style="520px;height:340px;border:1px solid gray" id="container"></div>
    <p>鼠标点击的百度坐标是:(<span id="info2"></span></p>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom(
    new BMap.Point(116.404, 39.915), 15);
    var i;
    var markers = [];
    map.addEventListener(
    "click",function(e){
    document.getElementById(
    "info2").innerHTML = e.point.lng + "," + e.point.lat;
    });
    //注意:百度和谷歌的经纬度坐标顺序是相反的。
    var points = [new BMap.Point(116.3786889372559,39.90762965106183),
    new BMap.Point(116.38632786853032,39.90795884517671),
    new BMap.Point(116.39534009082035,39.907432133833574),
    new BMap.Point(116.40624058825688,39.90789300648029),
    new BMap.Point(116.41413701159672,39.90795884517671)
    ];
    function callback(xyResult){
    if(xyResult.error != 0){return;}//出错就直接返回;
    var point = new BMap.Point(xyResult.x, xyResult.y);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.setCenter(point);
    // 由于写了这句,可以每一个被转的点都是中心点的过程
    }
    function magic(){
    BMap.Convertor.transMore(points,
    2,callback);
    }
    </script>
    </div>
    </div>
    </body>
    </html>

    changeMore.js
    //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){
    for(var index in points){
    if(index > 50){return;}
    var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type +
    "&to=4&x=" + points[index].lng + //这里要循环读入数组points的lng数据,直到points.length完毕。
    "&y=" + points[index].lat +
    "&callback=callback";
    //动态创建script标签
    load_script(xyUrl);
    }
    }

    window.BMap = window.BMap || {};
    BMap.Convertor = {};
    BMap.Convertor.transMore = transMore;
    })();

  • 相关阅读:
    关于httpd服务的安装、配置
    时间同步ntp服务的安装与配置(作为客户端的配置
    通过挂载系统光盘搭建本地yum仓库的方法
    linux系统的初化始配置(包括网络,主机名,关闭firewalld与selinux)
    Linux下GNOME桌面的安装
    Java面试题汇总
    无敌存储过程分页使用
    正则表达式
    函数
    杂货
  • 原文地址:https://www.cnblogs.com/milkmap/p/2195780.html
Copyright © 2011-2022 走看看