打开地图拖动位置获取经纬度给父窗口传值

2021-03-01 18:35:02 阅读：169 来源： 互联网

标签：function map 拖动 addressBox var pointBox centerPoint 传值给父

<!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>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        #addressBox{height:20px;width:600px;}
        #mapBox{height:400px;width:600px}
        #pointBox{height:20px;width:600px;}
    </style>
<body>
<div>
    <input id="addressBox" type="text" value="请输入结构化地址，例如无锡市" />
    <input id="" type="button" onclick="geocoder();" value="搜索" />
</div>
<div id='pointBox'> </div>
<div id='mapBox'></div>
<div>
使用方法：<br />
1.输入地址，点击搜索<br />
2.如果不够准确，可以拖动地图改变经纬度
</div>
<script type="text/javascript">
var $addressBox = document.getElementById('addressBox');
var $pointBox = document.getElementById("pointBox");

//创建地图 center是地图默认打开时候 定位显示的位置 这里是无锡市
var map = new AMap.Map("mapBox", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom:14
});

//添加标注
function addMarker(point) {
    var marker = new AMap.Marker({
        map: map,
        position: [ point.getLng(),  point.getLat()]
    });
}

//地图中心点添加标注
//如果要给父窗口传值 则这里写
function addCenterPoint(){
    map.clearMap();
    var centerPoint = map.getCenter();
    addMarker(centerPoint);
    $pointBox.innerHTML = "当前经纬度为：" + centerPoint.getLng() + ',' + centerPoint.getLat();
  //给父窗口空间传值 txt10是父窗口Input的ID的值
  var k = window.opener;
  k.document.getElementById("txt10").value ="";
}
addCenterPoint();

function geocoder() {
    map.clearMap();
    var myGeo = new AMap.Geocoder();
    //地理编码,返回地理编码结果
    myGeo.getLocation($addressBox.value, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            //地址解析成功
            geocoder_CallBack(result);
        }
        else{
            //地址解析失败
            $pointBox.innerHTML = "查无此地址";
        }
    });
}

//地理编码返回结果展示
function geocoder_CallBack(data) {
    var resultStr = "";
    var geocode = data.geocodes;
    addMarker(geocode[0].location);
    resultStr += "当前坐标</b>：" + geocode[0].location.getLng() + ", " + geocode[0].location.getLat();
    map.setFitView();
    $pointBox.innerHTML = resultStr;
}

map.on('moveend', function() {
    addCenterPoint();
});
</script>
</body>
</html>

标签：function,map,拖动,addressBox,var,pointBox,centerPoint,传值,给父
来源： https://www.cnblogs.com/sz-jack/p/14465181.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

打开地图拖动位置获取经纬度 给父窗口传值

打开地图拖动位置获取经纬度给父窗口传值