<div class="">
    <input type="text" readonly class="form-control" id="map_maploaction_{$name}" name="{$name}" value="{$val}" style="margin-bottom: 5px;">
    <button id="gdmap_start_stop_{$name}" data-flag="1" onclick="changeBtn(this)" class="btn btn-sm btn-primary" type="button">开始标注</button>
    <input type="text" id="gdmap_pickerInput_{$name}" class="search form-control" placeholder="搜索地址">
    <div id="gdmap_container_{$name}" style="width:100%; height:300px"></div>
</div>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:"{:config('app.gdkey')}",
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={:config('app.gdmap')}"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

<script type="text/javascript">
    var map = new AMap.Map('gdmap_container_{$name}', {
        zoom: 16,
        scrollWheel: true
    });
    var latlng = "{$val}";
    var lat = "";
    var lng = "";
    if(latlng){
        latlngs = latlng.split('-');
        lat = latlngs[0];
        lng = latlngs[1];
    }
    if(lat != ''){
        map.setCenter([lng,lat]);
    }

    //地图中添加地图操作ToolBar插件
    map.plugin(['AMap.ToolBar'], function() {
        var toolBar = new AMap.ToolBar();
        map.addControl(toolBar);
    });

    AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
        var positionPicker = new PositionPicker({
            mode: 'dragMap', //dragMap-拖拽地图  dragMarker-拖拽marker
            map: map,
        });
        positionPicker.on('success', function(positionResult) {
            var geocoder = new AMap.Geocoder();
            //地理编码,返回地理编码结果
            geocoder.getLocation(positionResult.address, function(status, result) {
                console.log('result',result,status,$('#gdmap_start_stop_{$name}').attr('data-flag'));
                if($('#gdmap_start_stop_{$name}').attr('data-flag') == 0){
                    if (status === 'complete' && result.info === 'OK') {
                        console.log(positionResult.position.lat+'-'+positionResult.position.lng);
                        $('#map_maploaction_{$name}').val(positionResult.position.lat+'-'+positionResult.position.lng);
                    }
                }
            });
        });
        positionPicker.start();
        var poiPicker = new PoiPicker({
            input: 'gdmap_pickerInput_{$name}'
        });
        poiPickerReady(poiPicker);
    });

    function poiPickerReady(poiPicker) {
        //选取了某个POI
        poiPicker.on('poiPicked', function(poiResult) {
            var poi = poiResult.item;
            map.setCenter(poi.location);
        });
    }

    function changeBtn(_self){
        var flag = $(_self).attr('data-flag');
        if(flag == 1){
            $(_self).attr('data-flag',0).html('结束标注');
        }else{
            $(_self).attr('data-flag',1).html('开始标注');
        }
    }
</script>