`
huangyongxing310
  • 浏览: 498646 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

高德地图获取地址

 
阅读更多
高德帐号
135704744 


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<style type="text/css">
    html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .map{
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div id="container" class="map"></div>
<div class="input-card">
    <h4>左击获取经纬度：</h4>
    <div class="input-item">
        <input type="text" readonly="true" id="lnglat">
    </div>
</div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=2261102c06b54bf9faead36b3cc1f8c8&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()


        var lng = e.lnglat.getLng();
        var lat = e.lnglat.getLat();
        console.log("经度："+lng+"纬度"+lat);
        var lnglatXY = [lng, lat];//地图上所标点的坐标
        AMap.service('AMap.Geocoder',function() {//回调函数
            geocoder = new AMap.Geocoder({
            });
            geocoder.getAddress(lnglatXY, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    //获得了有效的地址信息:
                    //即，result.regeocode.formattedAddress
                    console.log(result.regeocode.formattedAddress);
                    var address = result.regeocode.formattedAddress;

                    alert(address)
                } else {
                    //获取地址失败
                    alert("获取地址失败")
                }
            });
        })
    });
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
</script>
</body>
</html>








<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <!--    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">-->
    <!--    <title>鼠标拾取地图坐标</title>-->
    <!--    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=2261102c06b54bf9faead36b3cc1f8c8&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

    <!--    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>-->
    <!--    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>-->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <!--    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>-->
    <!--    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>-->


    <script src="../miniui/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    .map {
        height: 100%;
        width: 100%;
        float: left;
    }
</style>
<body>
<div>
    <!--    <input type="text" value="北京" id="testId">-->
    <!--    <input type="button" value="搜索" onclick="buttonFun()">-->

</div>
<div id="container" class="map"></div>
<div class="info">
    <div class="input-item">
        <div class="input-item-prepend">
            <span class="input-item-text" style="width:8rem;">关键字</span>
        </div>
        <input id='tipinput' type="text">
        <input type="button" value="搜索" class="input-item-text" onclick="mapSearchFun()">
        <input type="button" value="返回" class="input-item-text" onclick="mapGoBackFun()">
    </div>
</div>


<script type="text/javascript">
    var map = new AMap.Map("container",
        {
            resizeEnable: true,
            // zoom: 12,
            // center: [116.397428, 39.90923]
        }
    );
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function (e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()


        var lng = e.lnglat.getLng();
        var lat = e.lnglat.getLat();
        console.log("经度：" + lng + "纬度" + lat);
        var lnglatXY = [lng, lat];//地图上所标点的坐标
        AMap.service('AMap.Geocoder', function () {//回调函数
            geocoder = new AMap.Geocoder({});
            geocoder.getAddress(lnglatXY, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    //获得了有效的地址信息:
                    //即，result.regeocode.formattedAddress
                    console.log(result.regeocode.formattedAddress);
                    var address = result.regeocode.formattedAddress;

                    // alert(address)
                    var r = confirm("地址为：" + address);
                    if (r == true) {
                        // $("#" + parent.mapAddrId).val(address)
                        // $("#" + parent.mapAddrId, parent.document).val(address);
                        // $("#" + parent.mapLngId, parent.document).val(lng);
                        // $("#" + parent.mapLatId, parent.document).val(lat);
                        window.parent.mapCallBackFun(address,lng,lat);
                        $("#mapIframeId", parent.document).toggle();
                    }
                } else {
                    //获取地址失败
                    alert("获取地址失败")
                }
            });
        })
    });
    //输入提示
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }

    function mapSearchFun() {
        var searchValue = $("#tipinput").val();
        placeSearch.search(searchValue);
    }

    function mapGoBackFun() {
        $("#mapIframeId", parent.document).toggle();
    }


</script>
</body>
</html>







分享到：
| 在Windows中玩转Docker Toolbox
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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