layer弹出ifream,点击按钮把子页面数据传到父页面,对接高德地图API接口,获取地理位置坐标

先上效果图:
这里写图片描述

父页面部分:

function show_map() {
    layer.open({
        type: 2,
        title: false,
        scrollbar: false,
        closeBtn: 1,
        area: [($(window).width()*0.8)+'px', ($(window).height()*0.9)+'px'],
        skin: 'demo-class', //没有背景色
        shadeClose: true,
        content: ['/admin/set/show_map','no'],
    })
}

子页面点击保存、退出按钮

function close_win() {
    if(parent.layer){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
}

function save() {
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    var city = $('#input').val();
    var location = $('#location').val();
    parent.$('#city').val(city)
    parent.$('#address').val(location);
    parent.layer.close(index);
}

高德地图JavaScript部分:

<script type="text/javascript">
    var map = new AMap.Map('container',{
        resizeEnable: true,
        zoom: 13,
        //center: [116.39,39.9]
    });
    AMap.plugin('AMap.Geocoder',function(){
        var geocoder = new AMap.Geocoder({
            //city: "010"//城市,默认:“全国”
        });
        var marker = new AMap.Marker({
            map:map,
            bubble:true
        })
        var input = document.getElementById('input');
        var message = document.getElementById('message');
        var location = document.getElementById('location');
        map.on('click',function(e){
            marker.setPosition(e.lnglat);
            geocoder.getAddress(e.lnglat,function(status,result){
                if(status=='complete'){
                    input.value = result.regeocode.formattedAddress
                    location.value = e.lnglat
                    message.innerHTML = ''
                }else{
                    message.innerHTML = '无法获取地址'
                }
            })
        })

        input.onchange = function(e){
            var address = input.value;

            geocoder.getLocation(address,function(status,result){
                if(status=='complete'&&result.geocodes.length){
                    marker.setPosition(result.geocodes[0].location);
                    map.setCenter(marker.getPosition())
                    location.value = result.geocodes[0].location
                    message.innerHTML = ''
                }else{
                    message.innerHTML = '无法获取位置'
                }
            })
        }

    });
</script>

高德地图API接口最好去高德地图开发平台查看官方文档
使用之前需要先注册账号,申请KEY

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在OpenLayers地图上点击位置后弹出提示框,可以使用Overlay和Popup来实现。以下是一个简单的例子: ```javascript // 创建地图 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9086]), zoom: 10 }) }); // 创建一个VectorLayer用于添加点 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); // 创建一个Overlay用于显示提示框 var popupOverlay = new ol.Overlay({ element: document.getElementById('popup'), autoPan: true, autoPanAnimation: { duration: 250 } }); // 创建一个点击事件处理函数 function handleMapClick(event) { // 获取点击位置的坐标 var coordinate = event.coordinate; // 创建一个点Feature并添加到VectorLayer上 var feature = new ol.Feature({ geometry: new ol.geom.Point(coordinate) }); vectorLayer.getSource().addFeature(feature); // 设置提示框内容为坐标 var content = '<p>坐标:' + coordinate + '</p>'; document.getElementById('popup-content').innerHTML = content; // 将提示框显示在点击位置上 popupOverlay.setPosition(coordinate); map.addOverlay(popupOverlay); } // 监听Map对象的"click"事件,并在回调函数中处理点击事件 map.on('click', handleMapClick); // 将VectorLayer添加到地图上 map.addLayer(vectorLayer); ``` 在HTML中还需要添加一个Popup的容器,如下所示: ```html <div id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> ``` 这样就可以在地图上点击位置后弹出提示框了,提示框会显示点击位置的坐标

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值