html高德地图ip定位之后拖动自定义定位地址

前面貌似写过关于地图中心点绘制矩形的文章

下面直接贴代码就是组装高德的两个demo变成一个我想应该对于大多数还是挺有用的吧

<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>拖拽选址</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            width: 100%;
            padding: 0;
            overflow: hidden;
            font-size: 13px;
        }

        #container{height:500px; width: 500px; margin: 0 auto;}

        #tip {
            background-color: #fff;
            padding-left: 10px;
            padding-right: 10px;
            position: absolute;
            font-size: 12px;
            right: 10px;
            top: 20px;
            border-radius: 3px;
            border: 1px solid #ccc;
            line-height: 30px;
        }
    </style>
</head>

<body>
<div id="container" class="map" tabindex="0"></div>
<div id='tip'>

   <!-- <div>
        <div class='title'>选址结果</div>
        <div class='c'>经纬度:</div>
        <div id='lnglat'></div>
        <div class='c'>地址:</div>
        <div id='address'></div>
        <div class='c'>最近的路口:</div>
        <div id='nearestJunction'></div>
        <div class='c'>最近的路:</div>
        <div id='nearestRoad'></div>
        <div class='c'>最近的POI:</div>
        <div id='nearestPOI'></div>
    </div>-->
</div>
<input type="hidden" id="userlocaltionid">
<input type="hidden" id="userlocaltiontext">
<input type="hidden" id="addresscode">
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key={$geokey}&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {

        var map, geolocation;
        var map = new AMap.Map('container', {
            zoom:14,
            scrollWheel: false
        });

       /* AMap.plugin('AMap.ToolBar',function(){
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar)
        })*/
        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);
            geolocation.getCurrentPosition();
            //AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
           // AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
        });

        positionPicker.on('success', function(positionResult) {
            document.getElementById('userlocaltionid').value=positionResult.position.lng+','+positionResult.position.lat;

            document.getElementById('userlocaltiontext').value=positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber;
            document.getElementById('addresscode').value=positionResult.regeocode.addressComponent.adcode;
            var str=['定位成功'];
            str.push('地址：' + positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber);
            str.push('经度：' + positionResult.position.lng);
            str.push('纬度：' + positionResult.position.lat);
            str.push('邮编：' + positionResult.regeocode.addressComponent.adcode);

           // str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
            document.getElementById('tip').innerHTML =/* '<input type="text" id="searchgeo" /><button onclick="geocoder()">搜索</button><br/>'+*/str.join('<br>');

            /*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) {
            document.getElementById('userlocaltionid').value = ' ';
            document.getElementById('userlocaltiontext').value = ' ';
            document.getElementById('addresscode').value = ' ';
            document.getElementById('tip').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
        }))
    });
</script>
</body>

</html>

在里面有一个url上面是高德对应的keys替换一下就好

{$geokey}

就是这个替换成你的key

html高德地图ip定位之后拖动自定义定位地址

猜你喜欢