H5拖拽定位实例-高德地图接口

1.首先要准备一个对象

叫做 JavaScript Window Navigator

传送门

2.准备高德地图的UI组件-拖拽选址

传送门

开始贴代码！

 <script type="text/javascript">
        var locat, locats, jd, wd, adds = '',
            addres;
        $(document).on('click', '.box_text', function() {
            alert($(this).attr('data-name'))
        })

        function maps(params, params2) {

            AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                console.log(params)
                console.log(params2)
                var map = new AMap.Map('container', {
                    zoom: 17,
                    center: [params, params2],
                    resizeEnable: true,
                    scrollWheel: false
                })
                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: map
                });

                positionPicker.on('success', function(positionResult) {
                    $(".topTwo").html('');
                    adds = '';
                    var addsLen = positionResult.regeocode.pois;
                    // console.log(addsLen.length)
                    addsLen.forEach(function(data) {
                        // console.log(data);
                        // console.log(e.address);
                        addres = '<div class="weui-media-box weui-media-box_text box_text" data-id="' + data.id + '" data-name="' + data.name + '">'
                        addres += '<h4 class="weui-media-box__title"><i class="iconfont icon-icon1460191833045"></i>' + data.name + '</h4>'
                        addres += '<p class="weui-media-box__desc">' + data.address + '</p>'
                        addres += '</div>'
                        adds += addres;
                    });
                    $(".topTwo").append(adds);

                    // address: "黄埔大道中197"
                    // businessArea: "员村"
                    // direction: "东北"
                    // distance: 127
                    // id: "B00140U04W"
                    // location: c
                    // name: "鸿运花园"
                    // tel: ""
                    // type: "商务住宅;住宅区;住宅小区"

                    // document.getElementById('lnglat').innerHTML = positionResult.position;
                    // document.getElementById('address').innerHTML = positionResult.address;
                    // document.getElementById('nearestJunction').innerHTML = positionResult.nearestJunction;
                    // document.getElementById('nearestRoad').innerHTML = positionResult.nearestRoad;
                    // document.getElementById('nearestPOI').innerHTML = positionResult.nearestPOI;
                });
                positionPicker.on('fail', function(positionResult) {
                    console.log(positionResult)
                        // document.getElementById('lnglat').innerHTML = ' ';
                        // document.getElementById('address').innerHTML = ' ';

                    // document.getElementById('nearestJunction').innerHTML = ' ';
                    // document.getElementById('nearestRoad').innerHTML = ' ';
                    // document.getElementById('nearestPOI').innerHTML = ' ';
                });
                // var onModeChange = function(e) {
                //     positionPicker.setMode(e.target.value)
                // }

                // var startButton = document.getElementById('start');
                // var stopButton = document.getElementById('stop');
                // var dragMapMode = document.getElementsByName('mode')[0];
                // var dragMarkerMode = document.getElementsByName('mode')[1];
                // AMap.event.addDomListener(startButton, 'click', function() {
                //     positionPicker.start(map.getBounds().getSouthWest())
                // })
                // AMap.event.addDomListener(stopButton, 'click', function() {
                //     positionPicker.stop();
                // })
                // AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
                // AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);
                positionPicker.start();
                map.panBy(0, 1);

                map.addControl(new AMap.ToolBar({
                    liteStyle: true
                }))
            });
        }

        window.navigator.geolocation.getCurrentPosition(function(position) {
            jd = position.coords.longitude;
            wd = position.coords.latitude;

            url = "https://restapi.amap.com/v3/assistant/coordinate/convert?locations=" + jd + "," + wd + "&coordsys=gps&output=json&key=c962412697057591abdf0be494fc2c2b";
            $.ajax({
                type: "GET",
                url: url,
                dataType: "jsonp",
                success: function(data) {
                    console.log(data);
                    if (data.status == "1") {
                        locat = data.locations;
                        locats = locat.split(',');
                        console.log(locat.split(','));
                        // maps(jd, wd);
                        maps(locats[0], locats[1]);
                    }
                },
                error: function(data) {
                    alert("错误了");
                    console.log(data)
                }
            });
        });
    </script>

效果如下！