百度地图坐标和谷歌地图坐标互换(采用高德api，高德坐标和谷歌坐标一致)

最新推荐文章于 2023-08-28 15:29:24 发布

xiaoran606

最新推荐文章于 2023-08-28 15:29:24 发布

阅读量4.3k

点赞数

分类专栏： web前端+javascript

本文链接：https://blog.csdn.net/xiaoran606/article/details/9716709

版权

web前端+javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图坐标和谷歌地图坐标互换</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.2"></script>
</head>
<body>
<div>
百度地图坐标和谷歌地图坐标互换(采用高德api，高德坐标和谷歌坐标一致)</div>
<div id="bmap" style="width: 500px; height: 400px; float: left;">
</div>
<div id="gmap" style="width: 500px; height: 400px; float: left; margin-left: 10px;">
</div>
<div class="field" style="clear: both;">
<div class="input">
<label for="input-small">
百度经度:</label><input type="text" value="116.403801" id="bmaplng" name="blng" />
<label for="input-small">
百度維度:</label>
<input type="text" value="39.915573" id="bmaplat" name="blat" />
<input type="button" value="转谷歌" οnclick="b2g()" />
</div>
</div>
<div class="field">
<div class="input">
<label for="input-small">
谷歌经度:</label><input type="text" style="" value="116.397428" id="amaplng" name="lng" />
<label for="input-small">
谷歌維度:</label>
<input type="text" style="" value="39.90923" id="amaplat" name="lat" />
<input type="button" value="转百度" οnclick="g2b()" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
var ifmarker = "";
var point;
//百度地图初始化
var bm = new BMap.Map("bmap");
var bmaplng;
var bmaplat;
point = new BMap.Point("116.403801", "39.915573");
bm.centerAndZoom(point, 12);
bm.addControl(new BMap.NavigationControl());
bm.enableScrollWheelZoom();
//百度地图增加监听事件
bm.addEventListener("click", function (e) {
var pt = e.point;
if (ifmarker != "marker") {
addmarker_b(pt);
amaplat = 0.000000;
amaplng = 0.000000;
b2gFitLocation();
}
});
//百度地图添加点到地图中
function addmarker_b(pt) {
//debugger;
bm.clearOverlays();
marker_b = new BMap.Marker(pt); // 创建标注
bm.addOverlay(marker_b); // 将标注添加到地图中
marker_b.enableDragging();
marker_b.addEventListener("dragend", function (e) {
addmarker_b(marker_b.getPosition());
});
marker_b.addEventListener("click", function (e) {
ifmarker = "marker";
});
document.getElementById('bmaplat').value = pt.lat.toFixed(6);
document.getElementById('bmaplng').value = pt.lng.toFixed(6);
bm.setCenter(pt);
bmaplng = pt.lng;
bmaplat = pt.lat;
}
//高德地图初始化
var gm, toolbar, overview, scale;
gm = new AMap.Map("gmap", {
center: new AMap.LngLat(116.397428, 39.90923),
level: 11
});
gm.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
toolbar = new AMap.ToolBar();
toolbar.autoPosition = false; //加载工具条
gm.addControl(toolbar);
overview = new AMap.OverView(); //加载鹰眼
gm.addControl(overview);
});
//高德地图监听事件
AMap.event.addListener(gm, 'click', listenerfn);
function listenerfn(e) {
document.getElementById("amaplat").value = e.lnglat.getLat();
document.getElementById("amaplng").value = e.lnglat.getLng();
addMarker_g(e.lnglat.getLng(), e.lnglat.getLat());
point = new BMap.Point(e.lnglat.getLng(), e.lnglat.getLat());
g2bFitLocation(point);
}
//高德地图添加点到地图中
function addMarker_g(amaplng, amaplat) {
//构建点对象
gm.clearMap();
var marker_g = new AMap.Marker({
map: gm,
position: new AMap.LngLat(amaplng, amaplat), //基点位置
icon: "http://webapi.amap.com/images/marker_sprite.png", //marker图标，直接传递地址url
offset: { x: -8, y: -34} //相对于基点的位置
});
gm.setCenter(new AMap.LngLat(amaplng, amaplat));
//gm.setZoom(16);
// gm.setCenter(marker_g.getPosition());
}
//谷歌地图转百度地图
function g2bFitLocation(pt) {
BMap.Convertor.translate(pt, 2, translateCallback);
}
//坐标转换完之后的回调函数
function translateCallback(point) {
addmarker_b(point);
}
//百度地图转换为google地图，重复调用b2gFitLocation()，直至转过来的坐标经过转换后与百度原坐标差距小于0.000002
var amaplat = 0.000000;
var amaplng = 0.000000;
var bm_lat = 0;
var bm_lon = 0;
var delta_lat = 0;
var delta_lon = 0;
function b2gFitLocation() {
//debugger;
if (!amaplng) amaplng = 0.000000;
if (!amaplat) amaplat = 0.000000;
var point = new BMap.Point(amaplng, amaplat);
BMap.Convertor.translate(point, 2, b2gTranslateCallback);
}
function b2gTranslateCallback(point) {
var result_lat = bmaplat || document.getElementById('bmaplat').value;
var result_lon = bmaplng || document.getElementById('bmaplng').value;

bm_lat = point.lat.toFixed(6);
bm_lon = point.lng.toFixed(6);
delta_lat = (point.lat - result_lat).toFixed(6);
delta_lon = (point.lng - result_lon).toFixed(6);

var abs_delta_lat = Math.abs(delta_lat * 1e6);
var abs_delta_lon = Math.abs(delta_lon * 1e6);
if (abs_delta_lat < 2 && abs_delta_lon < 2) {
document.getElementById('amaplat').value = amaplat.toFixed(6);
document.getElementById('amaplng').value = amaplng.toFixed(6);
addMarker_g(amaplng, amaplat);
} else {
amaplat = amaplat - delta_lat;
amaplng = amaplng - delta_lon;
b2gFitLocation();
}
}

//页面按钮点击
function b2g() {
var lat = document.getElementById('bmaplat').value;
var lng = document.getElementById('bmaplng').value;
point = new BMap.Point(lng, lat);
addmarker_b(point);
amaplat = 0.000000;
amaplng = 0.000000;
b2gFitLocation();
}
function g2b() {
var lat = document.getElementById('amaplat').value;
var lng = document.getElementById('amaplng').value;
point = new BMap.Point(lng, lat);
addMarker_g(point.lng, point.lat);
g2bFitLocation(point);
}
</script>