Question

我正在尝试在本地下面的文本框中存储纬度和经度值，因此我可以将它们实现为ajax函数，但由于某种原因，它们不会存储到局部变量中。

例如，为了在文本框中显示这两个值（通过转换搜索栏中的地址计算），我使用了以下代码：

<p>Address: <input type="text" class="search_addr" size="45"/></p>
<p>Latitude: <input type="text" class="search_latitude" size="30"/></p>
<p>Longitude: <input type="text" class="search_longitude" size="30"/></p>

我发现无法将“search_latitude”和“search_longitude”表示的值存储到局部变量中。我在下面提供了一段javascript代码，但我尝试的内容如下：

// This attempt returns the values as "[Object object]"
var Lat =  $('.search_latitude').val(marker.getPosition().lat());
var Long = $('.search_longitude').val(marker.getPosition().lng());

// And this attempt stops the map from loading and stops all functionality
var Lat = $('.search_latitude').val();
var Long = $('.search_longitude').val();

作为javascript的初学者，我已经没有想法来解决这个问题了。有什么提示吗？

<script>
var geocoder;
var map;
var marker;

/*
 * Google Map with marker
 */
function initialize() {
    var initialLat = $('.search_latitude').val();
    var initialLong = $('.search_longitude').val();
    initialLat = initialLat?initialLat:53.350140;
    initialLong = initialLong?initialLong:-6.266155;

    var latlng = new google.maps.LatLng(initialLat, initialLong);
    var options = {
        zoom: 11,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("geomap"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: latlng
    });

    google.maps.event.addListener(marker, "dragend", function () {
        var point = marker.getPosition();
        map.panTo(point);
        geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $('.search_addr').val(results[0].formatted_address);
                $('.search_latitude').val(marker.getPosition().lat());
                $('.search_longitude').val(marker.getPosition().lng());
            }
        });
    });

}

$(document).ready(function () {
    //load google map
    initialize();

    /*
     * autocomplete location search
     */
    var PostCodeid = '#search_location';
    $(function () {
        $(PostCodeid).autocomplete({
            source: function (request, response) {
                geocoder.geocode({
                    'address': request.term
                }, function (results, status) {
                    response($.map(results, function (item) {
                        return {
                            label: item.formatted_address,
                            value: item.formatted_address,
                            lat: item.geometry.location.lat(),
                            lon: item.geometry.location.lng()
                        };
                    }));
                });
            },
            select: function (event, ui) {
                $('.search_addr').val(ui.item.value);
                $('.search_latitude').val(ui.item.lat);
                $('.search_longitude').val(ui.item.lon);
                var latlng = new google.maps.LatLng(ui.item.lat, ui.item.lon);
                marker.setPosition(latlng);
                initialize();
            }

        });
    });

    /*
     * Point location on google map
     */
    $('.get_map').click(function (e) {
        var address = $(PostCodeid).val();
        geocoder.geocode({'address': address}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $('.search_addr').val(results[0].formatted_address);
                $('.search_latitude').val(marker.getPosition().lat());
                $('.search_longitude').val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    });

    //Add listener to marker for reverse geocoding
    google.maps.event.addListener(marker, 'drag', function () {
        geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('.search_addr').val(results[0].formatted_address);
                    $('.search_latitude').val(marker.getPosition().lat());
                    $('.search_longitude').val(marker.getPosition().lng());
                }
            }
        });
    });
});

geocoder.geocode({
    'address': request.term,
    componentRestrictions: {country: "ie"}
})

function loginAlert(){
    alert("User must be logged in to view reports");
}

</script>

Answer 1

jQuery val() function返回一个jQuery对象，而不是一个字符串。将没有toString方法的对象转换为字符串将显示为[Object object]。看起来你正试图用一个语句做两件事：（1）将纬度/经度写入HTML元素。（2）将纬度/经度写入变量。尝试单独执行这些操作：

// (1) Write the latitude into the HTML element.    
$('.search_latitude').val(marker.getPosition().lat());
// (2) Write the latitude into a variable.
var Lat = marker.getPosition().lat();

// then perhaps check if the output is what you expected by viewing the developer console
console.log(Lat);

然后类似经度。

是否可以将类中的结果存储到Javascript

1 个答案: