`

高德地图设置地址坐标

 
阅读更多

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使用高德地图获取地理坐标信息

    在Vue.js应用中集成高德地图(Amap)以获取地理坐标信息是一项常见的需求,尤其在构建地理位置相关的Web应用时。高德地图API提供了丰富的功能,包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用...

    解决高德地图锁屏黑屏定位不更新,高德地图绘制定位轨迹,高德定位判断定位停留点,高德地图将所有坐标绘制在可视区域内

    高德地图将所有坐标绘制在可视区域内,本程序作为向高德地图申请高德LBS开发平台开发者认证证书的做业demo ,现在做业通过了,分享出来。 注:本定位 jar包为2.4版本。下载demo 以后 记得替换为自己申请的高德key值。...

    高德、百度坐标系转天地图坐标系

    例如,高德地图、百度地图以及天地图分别采用了它们自己的坐标系。本篇文章将详细阐述高德、百度坐标系与天地图坐标系之间的转换方法,并探讨这种转换的重要性。 首先,我们要理解坐标系的基本概念。在地理信息系统...

    高德地图坐标拾取、带参进入定位坐标

    高德地图作为一款广泛使用的地图API,提供了丰富的功能,包括坐标拾取、带参进入定位等功能。下面将详细解释这些知识点。 1. **坐标拾取**: 坐标拾取是指用户在地图上选择一个特定的位置时,系统能够获取到这个...

    web端高德地图显示坐标点

    在JavaScript中,我们可以使用高德地图API初始化地图,并设置中心点坐标和地图级别。例如: ```javascript var map = new AMap.Map('map', { zoom: 10, center: [116.404, 39.915] }); ``` 这里`zoom`参数是...

    高德地图API拾取坐标并赋值,可通过搜索框进行搜索获取

    高德地图API,拾取坐标,可通过点击地图获取,也可以通过搜索框进行搜索获取,带点标记

    高德、百度地图坐标偏移转换。

    百度、高德地图坐标偏移转换。所有电子地图必须对位置做偏移处理,这导致了从底层接口得到的经纬度坐标展示在地图上会有偏移。这种偏移不是线性的,不能简单地通过加减某个值来校正,并且不同的地图提供商采用的算法...

    java版GPS坐标转换为高德地图坐标

    此文件为纯java编写的GPS坐标转换到高德地图坐标,直接将文件添加到工程目录,调用转换函数即可,输入是double类型,输出是double数组,注意:输入输出数据的单位都是度。

    Android中GPS坐标转换为高德地图坐标详解

    本文主要聚焦于Android系统中如何将GPS获取的坐标转换为适用于高德地图的坐标。 首先,我们需要理解不同坐标系统的概念。GPS坐标通常基于WGS84(World Geodetic System 1984)标准,这是一种全球通用的地理坐标系统...

    百度、高德,WGS84坐标批量转换工具

    使用"百度、高德,WGS84坐标批量转换工具",用户只需输入或导入包含待转换坐标的文件(如CSV、Excel等),设置好转换类型(百度到WGS84,或高德到WGS84等),然后点击转换按钮,工具会自动完成所有的计算工作,并将...

    百度地图坐标拾取器(可转换为高德坐标)

    这里我们关注的是一个名为“百度地图坐标拾取器”的工具,该工具能够帮助用户方便地获取百度地图上的坐标,并将其转换为高德地图的坐标系统。 首先,我们要了解的是百度地图和高德地图分别采用的坐标系统。百度地图...

    C# 高德地图百度地图计算两点坐标距离

    C# 高德地图百度地图计算两点坐标距离,返回两点之间的距离

    Android外部调起高德地图显示坐标点

    在Android开发中,有时我们需要在应用中调用第三方地图应用,如高德地图,来显示特定的地理位置坐标。本文将详细讲解如何通过Android URI接口调用高德地图,并展示坐标点。 首先,我们需要理解Android URI的概念。...

    高德地图 ->选点,地址搜索,坐标逆解析

    高德地图 -&gt;选点,地址搜索,坐标逆解析

    高德地图 js 搜索获取坐标转换地图添加标记

    高德地图支持多种坐标系,如GCJ-02(国测局加密坐标)、BD-09(百度加密坐标)和WGS-84(全球通用坐标)。开发者可能需要将不同坐标系下的点转换为统一标准,高德地图提供了`AMap.CoordTransform`类来完成这个任务。...

    百度地图坐标转高德地图坐标源码

    因为高德百度地图各自有国标转换而来标准体系不一样,百度地图坐标转换成高德地图坐标。

    57.(leaflet篇)leaflet高德坐标转天地图坐标(gcj02转大地2000).zip

    本话题主要聚焦于如何在Leaflet中实现高德坐标(GCJ-02)到天地图坐标(CGCS2000,也称为大地2000)的转换。下面我们将详细探讨这个过程。 首先,我们来理解一下GCJ-02和CGCS2000这两个坐标系统。GCJ-02,又称为...

    高德腾讯百度坐标转换。

    高德腾讯百度坐标转换。

Global site tag (gtag.js) - Google Analytics