高德地图获取地址 -

huangyongxing310

浏览: 490786 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

高德地图获取地址

博客分类：

百度地图WEB API
JavaScript

高德帐号
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

2019-09-11 14:42
浏览 489
评论(0)
分类:互联网
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

高德地图获取地址

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

高德地图获取地址

评论

发表评论

相关推荐

定时调用函数功能实现

uniApiJs

百度人脸识别

点击DIV触发上传文件的方法

前端格式化工具与检测工具选择与使用

indexedDb TEST

defineProperty Array push 监听

weuiJsLayer.js

dataViewCommonJs

editorconfig配置

commonJs

setFormData

前端实现从剪贴板中获取数据

js prototype原理与使用

JS过滤树数据

百度地图WEB API

javascript匿名函数与闭包

JavaScript 作用域和作用域链

Javascript函数

Javascript执行步骤与顺序

最近访客更多访客>>