<div class="">
    <input type="text" readonly class="form-control" id="map_maploaction_{$name}" name="{$name}" value="{$val}" style="margin-bottom: 5px;">
    {if isset($province) && !empty($province)}
    <input type="hidden" class="form-control"  name="{$province}" value="{$pval}" id="s_province">
    {/if}
    {if isset($district) && !empty($district)}
    <input type="hidden" class="form-control"  name="{$district}" value="{$dval}" id="s_district">
    {/if}
    <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.gdsecret')}",
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={:config('app.gdkey')}"></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) {

                if($('#gdmap_start_stop_{$name}').attr('data-flag') == 0){

                    if (status === 'complete' && result.info === 'OK') {
                        $('#map_maploaction_{$name}').val(positionResult.position.lat+'-'+positionResult.position.lng);
                        var province =  result.geocodes[0].addressComponent.province;
                        var district =  result.geocodes[0].addressComponent.district;
                        $('#s_province').val(province);
                        $('#s_district').val(district);
                    }
                }else {
                    if (status === 'complete' && result.info === 'OK') {

                        var province =  result.geocodes[0].addressComponent.province;

                        var district =  result.geocodes[0].addressComponent.district;

                        $('#s_province').val(province);
                        $('#s_district').val(district);
                    }
                }
            });
        });
        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>