screen/application/admin/view/area/air_set.html

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>

<iframe
        id="mapPage"
        width="100%"
        height="600px"
        frameborder=0
        src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key={$site.tmap_key}&referer=myapp">
</iframe>
<div style="text-align: right;">
    <button onclick="saveAddr()">保存此机场位置</button>
</div>
<script>
    var addr={}
    //通过iframe内嵌调用，地图选点组件的页面会根据开发者设置的iframe宽高自适应。
    //注：1、使用iframe调用时,为防止在大屏手机上字体过小，需在源码中加入meta信息，<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    //2、开发者可以在自己的页面里通过iframe内嵌的方式调用该组件的时候，由于存在跨域的问题，需要通过html5 postMessage的方式回传用户选择的位置信息，开发者需要在自己的页面中实现一个监听函数，例如：
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if(loc && loc.module === 'locationPicker'){
            addr={
                longitude:loc.latlng.lng,
                latitude:loc.latlng.lat
            }
        }
    }, false)

    function saveAddr(){
        if(!addr.longitude){
            layer.alert('请选择地点')
            return
        }
        let a=layer.load(2,{shade:0.3})
        $.post('',addr,function (res) {
            Fast.api.close()
            layer.close(a)
        })
    }
</script>