我有一些 locationpickers 模态，每个人都有不同的 id 和名称，我第一次打开模态时位置名称显示正确
但是如果我关闭模态并再次输入该位置是空的
我不明白为什么，这是我的位置选择器的一些代码
$('#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，但我不知道该怎么做
我正在使用 logicify 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'>×</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="#">×</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"> </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" />
<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">
<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>
最佳答案
好吧，我想通了，我不知道为什么插件不起作用，但这是我的解决方案，它按我想要的方式工作
我创建了一个 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);
}
});
我希望这对遇到同样问题的人有帮助，如果有人有不同的想法，欢迎
关于javascript - Logicify jQuery Location Picker Plugin - 输入绑定(bind)位置名称仅在第一次使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51505478/