我在asp.net mvc中使用Jquery location picker - 在页面上加载它在默认位置上指向正常并且在浏览器控制台上没有生成错误但是当我将地图上的标记位置更改为其他位置时它会给出错误$(..)。locationpicker不是函数
我在以下jquery行中出错 -
var addressComponents = $(this).locationpicker('map').location.addressComponents;
HTML CODE
<div class="form-group">
<label class="control-label col-md-2">Country</label>
<div class="col-md-10">
@Html.DropDownList("Countries", null, "-- Select Country--", htmlAttributes: new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.State, "State", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("States", null, "-- Select State --", htmlAttributes: new { @class = "form-control" })
@*@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })*@
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.City, "City", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("Cities", null, "-- Select City --", htmlAttributes: new { @class = "form-control" })
@*@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })*@
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
<input type="hidden" name="DataID" value="@ViewBag.BusinessID" />
@Html.ValidationMessageFor(model => model.ZipCode, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div id="us2" style="width: 550px; height: 400px;"></div>
<div class="clearfix"> </div>
</div>
Jquery CODE -
<script src="~/assets/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
<script src="~/assets/js/locationpicker.jquery.js"></script>
<script>
$('#us2').locationpicker({
location: { latitude: 46.15242437752303, longitude: 2.7470703125 },
radius: 100,
inputBinding: {
latitudeInput: $('#us2-lat'),
longitudeInput: $('#us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}, onchanged: function (currentLocation, radius, isMarkerDropped) {
var addressComponents = $(this).locationpicker('map').location.addressComponents;
// updateControls(addressComponents);
console.log(addressComponents);
console.log(addressComponents.length);
for (var key in addressComponents) {
if (addressComponents.hasOwnProperty(key)) {
//alert(key + " -> " + addressComponents[key]);
if (key == "postalCode") {
$('#ZipCode').val(addressComponents[key]);
}
if (key == "country") {
$('#country').val(addressComponents[key]);
}
if (key == "stateOrProvince") {
$('#States').val(addressComponents[key]);
}
if (key == "city") {
$('#Cities').val(addressComponents[key]);
}
}
}
}, oninitialized: function (component) {
var addressComponents = $(component).locationpicker('map').location.addressComponents;
// updateControls(addressComponents);
},
enableAutocomplete: true
});
</script>