`

高德地图设置地址坐标

 
阅读更多

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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics