js代码:
//百度坐标转高德(传入经度、纬度)
function bd_decrypt(bd_lng, bd_lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = bd_lng - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return {lng: gg_lng, lat: gg_lat}
}
//高德坐标转百度(传入经度、纬度)
function bd_encrypt(gg_lng, gg_lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = gg_lng, y = gg_lat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return {
lat: bd_lat,
lng: bd_lng
};
}
layui.use(['form','upload','layer'],function(){
var form = layui.form
layer = parent.layer === undefined ? layui.layer : top.layer,
upload = layui.upload,
$ = layui.jquery;
setTimeout(function(){
var result = null;
var address = null;
$(".amap-logo").addClass("noclick");
var lng = 108.870038;
var lat = 34.751776;
var marker = null;
if($('#tlng').val()!="")
{
var point = bd_decrypt($('#tlng').val(),$('#tlat').val());
lng=point.lng;
lat=point.lat;
}
$("#tlng").val(lng)
$("#tlat").val(lat)
// 初始化地图 start
var marker, map = new AMap.Map("container", {
resizeEnable : true,
center : [ lng, lat ],
zoom : 15
});
/* map.on('complete', function() {
// 地图图块加载完成后触发
}); */
// 初始化地图 end
// 拖拽定位初始化 start
AMapUI.loadUI(['misc/PositionPicker' ],function(PositionPicker){
var positionPicker = new PositionPicker(
{
mode : 'dragMap',
map : map,
center : [ lng, lat ],
iconStyle : {
//外观(可更换为自定义)
url : 'http://webapi.amap.com/ui/1.0/assets/position-picker2.png',
ancher : [ 24, 40 ],
size : [ 48, 48 ]
}
});
positionPicker.start();
map.addControl(new AMap.ToolBar({
liteStyle : true
}))
positionPicker.on('success',function(positionResult) {
result = positionResult.position;
$("#tlng").val(result.lng);
$("#tlat").val(result.lat);
// 获取当前坐标
document.getElementById('lnglat').value = positionResult.position;
address = positionResult.address;
// 获取当前地址
document.getElementById('address').innerHTML = positionResult.address;
// 获取其他属性
/* document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI; */
});
});
// 拖拽定位初始化 end
// 搜索服务 start
AMapUI.loadUI([ 'misc/PoiPicker' ], function(PoiPicker) {
var poiPicker = new PoiPicker({
// city: 默认auto
//city:'北京',
input : 'pickerInput'
});
//初始化poiPicker
poiPickerReady(poiPicker);
});
function poiPickerReady(poiPicker) {
window.poiPicker = poiPicker;
//var marker = new AMap.Marker();
var infoWindow = new AMap.InfoWindow({
offset : new AMap.Pixel(0, -20)
});
//选取了某个POI
poiPicker.on('poiPicked',function(poiResult) {
var source = poiResult.source, poi = poiResult.item, info = {
source : source,
id : poi.id,
name : poi.name,
location : poi.location.toString(),
address : poi.address
};
// marker.setMap(map);
infoWindow.setMap(map);
// marker.setPosition(poi.location);
console.log(poi.location.lng + ","
+ poi.location.lat);
lng = poi.location.lng;
lat = poi.location.lat;
var marker, map = new AMap.Map("container", {
resizeEnable : true,
center : [ lng, lat ], //初始化地图中心点
zoom : 15
});
// myPicker(lng,lat);
AMapUI.loadUI(['misc/PositionPicker'],function(PositionPicker) {
var positionPicker = new PositionPicker(
{
mode : 'dragMap',
map : map,
// center: [lng, lat],
iconStyle : {
//外观(可更换为自定义)
url : 'http://webapi.amap.com/ui/1.0/assets/position-picker2.png',
ancher : [24,40],
size : [48,48]
}
});
// 拖拽定位初始化
positionPicker.start();
map.addControl(new AMap.ToolBar(
{
liteStyle : true
}))
positionPicker.on('success',function(positionResult) {
result = positionResult.position;
$("#tlng").val(result.lng);
$("#tlat").val(result.lat);
// 获取当前坐标
document.getElementById('lnglat').value = positionResult.position;
address = positionResult.address;
// 获取当前地址
document.getElementById('address').innerHTML = positionResult.address;
// 获取其他属性
/* document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI; */
});
});
});
/* poiPicker.onCityReady(function() {
poiPicker.suggest('村');
}); */
}
// 搜索服务 end
// 绑定移动事件 start
function mapMovestart() {
//document.querySelector("#text").innerText = '地图移动开始';
$(".input-card").css("display", "none");
}
function mapMoveend() {
//document.querySelector("#text").innerText = '地图移动结束';
$(".input-card").css("display", "");
}
map.on('movestart', mapMovestart);
// map.on('mapmove', mapMove);
map.on('moveend', mapMoveend);
$('.success').click(function(){
//弹出loading
var point = bd_encrypt(result.lng,result.lat);
var index = top.layer.msg('数据保存中,请稍候...',{icon: 16,time:false,shade:0.8});
$.post('/workorder/device/setpoint',{id:$('#id').val(),lng:point.lng,lat:point.lat,address:address},function(res){
if (res.data){
layer.close(index);
layer.msg("设置成功!");
layer.closeAll("iframe");
//刷新父页面
parent.location.reload();
} else {
layer.msg(res.msg);
}
});
return false;
});
},500);
})
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置坐标</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="/static/js/jquery/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/static/css/public.css" media="all" />
<script type="text/javascript"src='http://webapi.amap.com/maps?v=1.4.15&key=f15d2bb0a478e528d2f325621ac5491c&plugin=AMap.ToolBar'></script>
<script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<style>
* {margin: 0;padding: 0;}
html, body, #container {width: 100%;height: 100%;overflow: hidden;}
#pickerBox {position: absolute;z-index: 9999;top: 10px;left: 10px;width: 30%;height: 30px;box-shadow: 0 8px 6px #ddd;border-radius: 4px 0 0 4px;}
#pickerInput {width: 100%;border: 1px solid #ccc;-webkit-appearance: none;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);height: 100%;display: block;text-indent: 8px;box-sizing: border-box;font-size: 12px;border-radius: 4px 0 0 4px;}
#poiInfo {background: #fff;}
.amap_lib_placeSearch .poibox.highlight {background-color: #CAE1FF;}
.amap_lib_placeSearch .poi-more {display: none !important;}
.noclick {pointer-events: none;}
.amap-logo {display: none;opacity: 0 !important;}
.amap-copyright {opacity: 0;}
.input-card {min-width: 0;word-wrap: break-word;background-clip: border-box;width: 240px;border-width: 0;border-radius: 0.4rem;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5);position: fixed;top: 55%;left: 50%;margin-left: -120px;flex: 1 1 auto;padding: 0.75rem 1.25rem;background-color: rgba(0, 0, 0, 0.5);color: #fff;font-size: 12px;text-align: justify;}
.amap-touch-toolbar .amap-zoomcontrol {bottom: -50px;}
.no-yes-btn {bottom: 10px;width: 60px;height: 32px;line-height: 32px;border-radius: 4px;position: fixed;display: block;text-align: center;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-decoration: none;}
.no-btn {left: 10px;}
.yes-btn {right: 10px;background-color: #51c276;}
.amap-ui-poi-picker-sugg-list .sugg-item {font-size: 12px !important;}
.searChMap {display: block;background-color: #39a4ff;width: 60px;height: 30px;font-size: 12px;line-height: 30px;color: #fff;text-align: center;top: 0;position: absolute;right: -60px;border-radius: 0 4px 4px 0;text-decoration: none;}
.success{display: block;background-color: #39a4ff;width: 60px;height: 30px;font-size: 12px;line-height: 30px;color: #fff;text-align: center;top: 0;position: absolute;right: -129px;border-radius: 4px 4px 4px 4px;text-decoration: none;}
</style>
</head>
<body>
<div id="container"></div>
<div id="pickerBox">
<input id="pickerInput" placeholder="输入关键字选取地点" />
<div id="poiInfo"></div>
<a class="searChMap" href="javascript:void(0);">搜索</a><a class="success" href="javascript:void(0);">确定</a>
</div>
<div id="r-result">
<form class="layui-form">
<input id="id" value="" type="hidden">
<input id="tlng" value="" type="number">
<input id="tlat" value="" type="number">
<input id="dz" value="" type="hidden">
</form>
</div>
<div class="input-card">
<h4 style="display: none;">左击获取经纬度:</h4>
<div class="input-item" style="display: none;">
<input type="text" readonly="true" id="lnglat">
</div>
<div>
<div class='c'>地址:</div>
<div id='address'></div>
</div>
</div>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/workorder/device/setpointval.js"></script>
</body>
</html>
相关推荐
"高德地图坐标拾取器"是一个用于获取地图上特定位置坐标值的工具,它结合了高德地图API,提供用户友好的界面,使得开发者或普通用户能够方便地获取到地图上的经纬度信息。在地理信息系统(GIS)中,坐标拾取器是一个...
在Vue.js应用中集成高德地图(Amap)以获取地理坐标信息是一项常见的需求,尤其在构建地理位置相关的Web应用时。高德地图API提供了丰富的功能,包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用...
高德地图将所有坐标绘制在可视区域内,本程序作为向高德地图申请高德LBS开发平台开发者认证证书的做业demo ,现在做业通过了,分享出来。 注:本定位 jar包为2.4版本。下载demo 以后 记得替换为自己申请的高德key值。...
例如,高德地图、百度地图以及天地图分别采用了它们自己的坐标系。本篇文章将详细阐述高德、百度坐标系与天地图坐标系之间的转换方法,并探讨这种转换的重要性。 首先,我们要理解坐标系的基本概念。在地理信息系统...
高德地图作为一款广泛使用的地图API,提供了丰富的功能,包括坐标拾取、带参进入定位等功能。下面将详细解释这些知识点。 1. **坐标拾取**: 坐标拾取是指用户在地图上选择一个特定的位置时,系统能够获取到这个...
在JavaScript中,我们可以使用高德地图API初始化地图,并设置中心点坐标和地图级别。例如: ```javascript var map = new AMap.Map('map', { zoom: 10, center: [116.404, 39.915] }); ``` 这里`zoom`参数是...
高德地图API,拾取坐标,可通过点击地图获取,也可以通过搜索框进行搜索获取,带点标记
百度、高德地图坐标偏移转换。所有电子地图必须对位置做偏移处理,这导致了从底层接口得到的经纬度坐标展示在地图上会有偏移。这种偏移不是线性的,不能简单地通过加减某个值来校正,并且不同的地图提供商采用的算法...
此文件为纯java编写的GPS坐标转换到高德地图坐标,直接将文件添加到工程目录,调用转换函数即可,输入是double类型,输出是double数组,注意:输入输出数据的单位都是度。
本文主要聚焦于Android系统中如何将GPS获取的坐标转换为适用于高德地图的坐标。 首先,我们需要理解不同坐标系统的概念。GPS坐标通常基于WGS84(World Geodetic System 1984)标准,这是一种全球通用的地理坐标系统...
使用"百度、高德,WGS84坐标批量转换工具",用户只需输入或导入包含待转换坐标的文件(如CSV、Excel等),设置好转换类型(百度到WGS84,或高德到WGS84等),然后点击转换按钮,工具会自动完成所有的计算工作,并将...
这里我们关注的是一个名为“百度地图坐标拾取器”的工具,该工具能够帮助用户方便地获取百度地图上的坐标,并将其转换为高德地图的坐标系统。 首先,我们要了解的是百度地图和高德地图分别采用的坐标系统。百度地图...
C# 高德地图百度地图计算两点坐标距离,返回两点之间的距离
在Android开发中,有时我们需要在应用中调用第三方地图应用,如高德地图,来显示特定的地理位置坐标。本文将详细讲解如何通过Android URI接口调用高德地图,并展示坐标点。 首先,我们需要理解Android URI的概念。...
高德地图 ->选点,地址搜索,坐标逆解析
高德地图支持多种坐标系,如GCJ-02(国测局加密坐标)、BD-09(百度加密坐标)和WGS-84(全球通用坐标)。开发者可能需要将不同坐标系下的点转换为统一标准,高德地图提供了`AMap.CoordTransform`类来完成这个任务。...
因为高德百度地图各自有国标转换而来标准体系不一样,百度地图坐标转换成高德地图坐标。
本话题主要聚焦于如何在Leaflet中实现高德坐标(GCJ-02)到天地图坐标(CGCS2000,也称为大地2000)的转换。下面我们将详细探讨这个过程。 首先,我们来理解一下GCJ-02和CGCS2000这两个坐标系统。GCJ-02,又称为...
高德腾讯百度坐标转换。