<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="1.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="width: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="width: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>


//

(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;

})();

API地图坐标转化（批量转换坐标）的更多相关文章

  1. OpenGL屏幕二维坐标转化成三维模型坐标

    我们把OpenGL里模型的三维坐标往二维坐标的转化称为投影,则屏幕上的二维坐标往三维坐标转化则可以称为反投影,下面我们来介绍一下反投影的方法. 主要是gluUnProject函数的使用,下面是代码: ...

  2. 百度地图API 地图圈区域并计算坐标点是否在区域内

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 百度地图坐标纠偏和转换工具和DLL

    百度一直以来都是个即想装出一副拥抱互联网开放的样子,又为了短期商业利益封闭自己的公司,模仿谷歌地图,开放了自己的百度地图 API,为了防止别人盗用其数据和用户自由迁移,地图相比于火星坐标,又更加封闭, ...

  4. 【高德地图API】如何解决坐标转换，坐标偏移？

    http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...

  5. iOS 地图坐标系之间的转换WGS-84世界标准坐标、GCJ-02中国国测局(火星坐标,高德地图)、BD-09百度坐标系转换

    开发过程中遇到地图定位不准确,存在偏差.首先确认你获取到的坐标所在坐标系跟地图数据是不是相匹配的. 常用的地图SDK:高德地图使用的是GCJ-02(也就是火星坐标系),百度使用的是BD-09百度坐标系 ...

  6. 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  7. iOS 之地图坐标体系和转换

    一.坐标体系 首先我们要明白,开发者能接触到哪些坐标体系呢? 第一种分类: 1. GPS,WGS-84,原始坐标体系.一般用国际标准的GPS记录仪记录下来的坐标, 都是GPS的坐标.很可惜,在中国,任 ...

  8. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

  9. php 百度地图 腾讯地图 转换坐标

    /* * 中国正常GCJ02坐标---->百度地图BD09坐标 * 腾讯地图用的也是GCJ02坐标 * @param double $lat 纬度 * @param double $lng 经度 ...

随机推荐

  1. 【Shell脚本学习19】Shell while循环

    while循环用于不断执行一系列命令,也用于从输入文件中读取数据:命令通常为测试条件.其格式为: while command do    Statement(s) to be executed if ...

  2. 条件控制（if ) ( case）

    一:IF应用格式 (1) (2) (3) IF 条件 THEN IF 条件 THEN IF 条件1 THEN --代码块        --代码块    --代码块1 commit; commit; ...

  3. bash 中的case语法

    CASE语法格式备忘 case $variable-name in pattern1) command1 ... .... commandN ;; pattern2|pattern3|pattern4 ...

  4. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  5. VS平台工具集版本

    参考:http://blog.csdn.net/hillseas/article/details/47373313 VS从2010之后开始支持使用之前的版本进行编译,可以在工程属性->常规中进行 ...

  6. 转：微信Android客户端架构演进之路

    转自: http://www.infoq.com/cn/articles/wechat-android-app-architecture 微信Android客户端架构演进之路 作者 赵原 发布于 20 ...

  7. C语言数据类型

    1.概述 C 语言包含的数据类型如下图所示: 2.各种数据类型介绍 2.1整型 整形包括短整型.整形和长整形. 2.1.1短整形 short a=1; 2.1.2整形 一般占4个字节(32位),最高位 ...

  8. hihocoder 1037 数字三角形

    #1037 : 数字三角形 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸 ...

  9. Linux Centos 怎么安装更新根证书实现支持https访问

    其实很简单就是一个命令:  mozroots --import --ask-remove    或者使用:  sudo update-ca-certificates   

  10. 【ASP.NET基础】客户端、服务器端的数据验证 + CKEditer

    1, 客户端 用Javascript进行验证,直接提示用户输入的数据是否符合规范,是否合法. 这样体验行比较好,客户端立即就可以得到反馈,而且减少了服务器端的数据交互. 这样前端数据验证并不是很安全, ...