`

高德地图设置地址坐标

 
阅读更多

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值。...

    web端高德地图显示坐标点

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

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

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

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

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

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

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

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

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

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

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

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

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

    百度地图坐标拾取器（可转换为高德坐标）

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

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

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

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

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

    高德地图 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，又称为...

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

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

    高德腾讯百度坐标转换。

    高德腾讯百度坐标转换。

    高德地图获取当前位置

    此外，高德地图SDK还提供了丰富的地理编码和反地理编码功能，可以将经纬度转换为地址，或者反之。这对于实现基于位置的服务，如搜索附近的兴趣点、导航等，都十分有用。 在项目“高德地图获取当前位置”的源代码中...

Magicbox
Global site tag (gtag.js) - Google Analytics