获取位置,拖拽地图,引用<高德地图>,位置经纬度

上面是实现效果

首先设置HTML格式

div class="locations">
                    div class="bMap"  class="layui-input-block" style="max-width:600px;">
                        
                        input type="hidden" name="lng" id="lng" value="114.474007" />
                        input type="hidden" name="lat" id="lat" value="38.034332" />
                        input type="button"  id='sever_add' size="20"  class="dizhi-txt" value="" value="拖拽地图获取位置信息" />
                        input type="hidden" name="address" id='address' value=""/>
                    div>
                    div class=" ">
                        
                        div class="map_us" id='allmap'>div>
                    div>
                div>

获取坐标信息

引用插件和js

script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=533ac127fae022429da22abea70e13fe">script>
script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js">script>
script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=533ac127fae022429da22abea70e13fe&plugin=AMap.ToolBar">script>

script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1">script>

通过拖拽得到的经纬度去定位位置信息

script>
    var lng = $("#lng").val();
    var lat = $("#lat").val();
    //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        var map = new AMap.Map('allmap',{
            zoom:16,
            center:[lng,lat],
        })
        // 地图定位事件
        AMap.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            if (lng == '') {
                geolocation.getCurrentPosition();
            }
        });

        var positionPicker = new PositionPicker({
            mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map:map//依赖地图对象
        });

        // 定位成功和定位失败

        positionPicker.on('success', function(positionResult) {
            document.getElementById('lat').value = positionResult.position.lat;
            document.getElementById('lng').value = positionResult.position.lng;
            document.getElementById('sever_add').value = positionResult.address;
            document.getElementById('address').value = positionResult.address;
        });
        positionPicker.on('fail', function(positionResult) {
            positionPicker.start([116.434747,39.908133]);//开始拖拽
        });
        // 改变事件
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }

        positionPicker.start();//开始拖拽

        map.panBy(0, 1);
        // 控件
        map.addControl(new AMap.ToolBar({
            liteStyle: true,
            position: {top:'10px',right:'10px'},
        }))
    });


script>