Logicify jQuery位置选择器插件-Inputbinding位置名称仅在第一次使用时有效

时间:2018-07-24 18:38:05

标签: javascript jquery modal-dialog jquery-location-picker

我有一些locationpickers模式,每个人的ID和名称都不同,并且第一次打开模式时,位置名称正确显示

enter image description here

但是如果我关闭模态并再次输入,则该位置为空

enter image description here

我不明白为什么,这是我的位置选择器的一些代码

$('#us313').locationpicker({
                    location: {
                        latitude: <?php if(isset($sLatitude) && $sLatitude !=''){echo $sLatitude;} else{ echo MAIN_LATITUDE;} ?>,
                        longitude: <?php if(isset($sLongitude) && $sLongitude !=''){echo $sLongitude;} else{ echo MAIN_LONGITUDE;} ?>
                    },
                    radius: 0,
                    zoom:16,
                    mapOptions: {
                        draggable:true,
                        zoomControl: true,
                        fullscreenControl: false,
                        gestureHandling: 'none',
                        maxZoom: 18,
                        minZoom:14
                    },
                    markerInCenter:false,
                    scrollwheel:false,
                    centerMarker: false,
                    draggable:false,
                    inputBinding: {
                        latitudeInput: $('#place_latitude12'),
                        longitudeInput: $('#place_longitude12'),
                        locationNameInput: $('#us313-address')
                    },
                    enableAutocomplete: true,
                    markerIcon: '../images/map-marker-2-xl.png',
                    onchanged: function(currentLocation, radius, isMarkerDropped) {


                            if(validateBounds(new google.maps.LatLng(currentLocation.latitude,currentLocation.longitude)))
                            {   

                            }
                            else
                            {
                                var mapContext = $('#us313').locationpicker('map');
                                mapContext.marker.setPosition(new google.maps.LatLng(<?php if(isset($sLatitude) && $sLatitude !=''){echo $sLatitude;} else{ echo MAIN_LATITUDE;} ?>,<?php if(isset($sLongitude) && $sLongitude !=''){echo $sLongitude;} else{ echo MAIN_LONGITUDE;} ?>));
                                $alertMsg.show();
                                $('#modal-14').data('bs.modal').handleUpdate(); 
                            }

                    }
                });

这是显示的模式

$('#modal-14').on('shown.bs.modal', function () 
                {
                    mapPlace = $('#us313').locationpicker('map').map;

                    if(gameAreaPlace == null)
                    {
                        redCoordsPlace = [
                            {lat: parseFloat($('#sLimitNW').val().split(",")[0]), lng: parseFloat($('#sLimitNW').val().split(",")[1])},
                            {lat: parseFloat($('#sLimitNE').val().split(",")[0]), lng: parseFloat($('#sLimitNE').val().split(",")[1])},
                            {lat: parseFloat($('#sLimitSE').val().split(",")[0]), lng: parseFloat($('#sLimitSE').val().split(",")[1])},
                            {lat: parseFloat($('#sLimitSW').val().split(",")[0]), lng: parseFloat($('#sLimitSW').val().split(",")[1])}
                        ];

                        gameAreaPlace = new google.maps.Polygon({
                                map: mapPlace,
                                paths: redCoordsPlace,
                                strokeColor: '#FF0000',
                                strokeOpacity: 0.8,
                                strokeWeight: 2,
                                fillColor: '#FF0000',
                                fillOpacity: 0.35,
                                draggable: false,
                                geodesic: true
                            });

                        verticesPlace = gameAreaPlace.getPath();

                        boundsPlace = new google.maps.LatLngBounds();
                        for (i = 0; i < verticesPlace.length; i++) {
                            boundsPlace.extend(verticesPlace.getAt(i));
                        }
                        mapPlace.setZoom(getZoomLevel());
                    }
                    lastValidCenterPlace = mapPlace.getCenter();

                    google.maps.event.addListener(mapPlace, 'center_changed', function() {
                        if (boundsPlace.contains(mapPlace.getCenter())) {
                            // still within valid bounds, so save the last valid position
                            lastValidCenterPlace = mapPlace.getCenter();
                            return; 
                        }

                        // not valid anymore => return to last valid position
                        mapPlace.panTo(lastValidCenterPlace);
                    });                     

                    $('#us313').locationpicker('autosize');

                });

你有什么主意吗?我想我必须重新初始化locationpicker,但我不知道如何

我正在使用逻辑化locationpikcer插件

更新

这是模态部分

<div class='modal fade md-effect-13' id='modal-14' data-backdrop="static" data-keyboard="false">
    <div class='modal-dialog'>
        <div class='modal-statetent box'>
            <div class='modal-header box-header blue-background' >
                <span id="new_button2">
                    <button  class='md-close close' id="old2" data-dismiss='modal'>&times;</button>
                </span>
                <h4 class='modal-title title' id='myModalLabel2'>Add New Place</h4>
            </div>
            <ul id="languageListPlace" class="languages">

            <?php
                $firstLan = true;
                foreach($languages as $lan)
                {
                    if($firstLan)
                    {
                        echo '<li id="'.$lan["sShortName"].'" onclick="changeLanguage(this,\'Place\')" class="button_lang current_lang">'.strtoupper($lan["sShortName"]).'</li>';
                        $firstLan=false;
                    }
                    else
                        echo '<li id="'.$lan["sShortName"].'" onclick="changeLanguage(this,\'Place\')" class="button_lang">'.strtoupper($lan["sShortName"]).'</li>';
                }
            ?>

            </ul>
            <div class='modal-body box-content'>
                <div class='error-msg' id='validationSummaryPlace'></div>
                <div class='alert alert-danger data-hide'id="alertMsg" style="display:none;">
                    <a class="close" data-hide="alert" href="#">&times;</a>
                    <h4>
                        <i class='icon-remove-sign'></i>The place must be inside the Game Limit
                    </h4>
                </div>
                <form method="post" id="add-form2" action="" class="form-horizontal" role="form" enctype="multipart/form-data">
                    <div class="modal-body" id="divDataPlace">
                        <div class="form-group" >
                            <label for="badge_title" class='control-label col-sm-3'><b>Location Map</b></label>
                            <div class='col-md-8' >
                                <input type="text" class="form-control" id="us313-address" />
                            </div>
                        </div>
                        <div class="form-group" style="display:none;">
                            <label for="badge_title" class='control-label col-sm-3'><b>Radious</b></label>
                            <div class='col-md-8' >
                                <input type="text" class="form-control" id="us313-radius" />
                            </div>
                        </div>
                        <div id="us313" style="width: 100%; height: 400px;"></div>
                        <div class="clearfix">&nbsp;</div>
                        <div class="form-group">
                            <label for="badge_title" class='control-label col-sm-3'><b>Place Latitude</b></label>
                            <div class='col-md-8' >
                                <input type="text" name="place_latitude" class="form-control" id="place_latitude12" placeholder="Enter Place Latitude" value="<?php if(isset($sLatitude) && $sLatitude !=''){echo $sLatitude;} else{ echo MAIN_LATITUDE;} ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="badge_title" class='control-label col-sm-3'><b>Place Longitude</b></label>
                            <div class='col-md-8' >
                                <input type="text" name="place_longitude" class="form-control" id="place_longitude12" placeholder="Enter Place Longitude" value="<?php if(isset($sLongitude) && $sLongitude !=''){echo $sLongitude;} else{ echo MAIN_LONGITUDE;} ?>">
                            </div>
                        </div>
                        <div class="form-group" id="placeTypeDiv">
                            <label class='control-label col-sm-3'>Place Type</label>
                            <div class='col-md-8' >
                                <select name="place_type" id="place_type" class="form-control" onChange="check_place_type();">
                                    <option value="0">Select Type</option>
                                    <option value="1">Coin</option>
                                    <?php
                                        $SQL_STATEMENT =  "SELECT * FROM places_types_master where sPlaceTypeLabel NOT IN ('Hint','Key','Coin', 'Checkpoint') ORDER BY sPlaceTypeLabel DESC";

                                        $DatabaseCo->dbResult=$DatabaseCo->getSelectQueryResult($SQL_STATEMENT);        

                                        while($DatabaseCo->dbRow = mysqli_fetch_object($DatabaseCo->dbResult))  
                                        {       
                                    ?>
                                        <option value="<?php  echo $DatabaseCo->dbRow->iPlaceTypeID;?>"><?php  echo $DatabaseCo->dbRow->sPlaceTypeLabel;?></option>
                                    <?php
                                        }
                                    ?>
                                </select>
                            </div>
                        </div>
                        <?php
                            $firstLan = true;
                            foreach($languages as $lan)
                            {   
                                if($firstLan)
                                {
                                    echo '<div class="form-group lan-'.$lan["sShortName"].' languageDiv" id="place_title_div">
                                            <label for="badge_title" class=\'control-label col-sm-3\'><b>Place Name ('.$lan["sShortName"].')</b></label>
                                            <div class=\'col-md-8\' >
                                                <input type="text" name="place_title_'.$lan["sShortName"].'" maxlength="18" placeholder="Max 18 characters" class="form-control" id="place_title_'.$lan["sShortName"].'" value="">
                                            </div>
                                        </div>
                                        <div class="form-group lan-'.$lan["sShortName"].' languageDiv" id="description_div">
                                            <label class=\'control-label col-sm-3\'>Place Description ('.$lan["sShortName"].')</label>
                                            <div class=\'col-md-8\' >
                                                <textarea cols="50" rows="2" class="text-area form-control" maxlength="70" placeholder="Max 70 characters" name="description_'.$lan["sShortName"].'" id="description_'.$lan["sShortName"].'" value=""></textarea>
                                            </div>
                                        </div>';
                                    $firstLan = false;
                                }
                                else
                                {
                                    echo '<div class="form-group lan-'.$lan["sShortName"].' languageDiv hideDiv" id="place_title_div">
                                            <label for="badge_title" class=\'control-label col-sm-3\'><b>Place Name ('.$lan["sShortName"].')</b></label>
                                            <div class=\'col-md-8\' >
                                                <input type="text" name="place_title_'.$lan["sShortName"].'" maxlength="18" placeholder="Max 18 characters" class="form-control" id="place_title_'.$lan["sShortName"].'" value="">
                                            </div>
                                        </div>
                                        <div class="form-group lan-'.$lan["sShortName"].' languageDiv hideDiv" id="description_div">
                                            <label class=\'control-label col-sm-3\'>Place Description ('.$lan["sShortName"].')</label>
                                            <div class=\'col-md-8\' >
                                                <textarea cols="50" rows="2" class="text-area form-control" maxlength="70" placeholder="Max 70 characters" name="description_'.$lan["sShortName"].'" id="description_'.$lan["sShortName"].'" value=""></textarea>
                                            </div>
                                        </div>';    
                                }
                            }
                        ?>
                        <div class="form-group" id="image_div">
                            <label class='control-label col-sm-3'>Place  Image</label>
                            <div class='col-md-8' >
                                <input type="file" name="image" id="image" size="8" />
                            </div>
                            <input type="hidden" name="old_image" id="old_image" />&nbsp;&nbsp;&nbsp;&nbsp;
                            <div id="image_preview" align="center"></div>
                        </div>                          
                        <div class="form-group">
                            <label class='control-label col-sm-3'><b>Place Status</b></label>
                            <div class="radio">&nbsp;&nbsp;&nbsp;                               
                                <input id="optionsRadios1" class="place_status" type="radio" checked="" value="APPROVED" name="place_status">
                                <label for="optionsRadios1"><b>Active</b> </label>
                                <input id="optionsRadios2" class="place_status" type="radio" value="UNAPPROVED" name="place_status">
                                <label for="optionsRadios2"><b>Inactive </b></label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" id="save2" class="btn btn-primary" value="Save" title="Save"/>
                        <input type="hidden" name="iPlaceID" id="iPlaceID" value=""/>
                        <input type="hidden" name="iTourID" id="iTourID" value="<?php echo $TourID;?>"/>
                        <input type="hidden" name="action" value="" id="update_action2"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

好吧,我想出了什么办法,我不知道为什么插件不起作用,但这是我的解决方案,并且可以按我想要的方式工作

我创建了一个Geocoder并引用了标记的最后一个经度

var geocoder = new google.maps.Geocoder;
var lastLat = "any";
var lastLng = "any";

当locationpicker触发onchanged事件时,我保存了最后的经纬度

onchanged: function(currentLocation, radius, isMarkerDropped) {
                        lastLat = currentLocation.latitude;
                        lastLng = currentLocation.longitude;
                    }

然后,当模式打开时,我使用那个地理编码器来获取标记的地址

var latlng = {lat: lastLat, lng: lastLng};

                    geocoder.geocode({'location': latlng}, function(results, status) 
                    {
                        console.log(status);
                        if (status === 'OK') 
                        {
                            if (results[0]) 
                            {
                                $('#us313-address').val(results[0].formatted_address);
                                //infowindow.open(map, marker);
                            } 
                            else 
                            {
                                //window.alert('No results found');
                            }
                        } 
                        else 
                        {
                            //window.alert('Geocoder failed due to: ' + status);
                        }
                    });

如果有人有其他想法,我希望这可以帮助遇到相同问题的人