$(..)位置选择器不是函数 - Jquery位置选择器OnChanged事件

时间:2016-04-14 06:57:34

标签: jquery asp.net-mvc google-maps jquery-plugins error-handling

我在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">&nbsp;</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>

0 个答案:

没有答案