如何在Google Map JS代码中添加AJAX请求

时间：2018-01-17 19:06:59

标签： javascript ajax spring google-maps

我尝试传递从用户搜索的位置获取的纬度和经度值（请参阅屏幕截图中的示例）并将它们传递到Spring MVC框架中的控制器类。 （我打算将纬度和经度值与MySQL数据库中的其他纬度和经度值进行比较）。它将根据用户搜索的位置将评级返回到下面的文本框中。由于不熟悉这种类型的多语言交流，我做了一些研究，似乎AJAX可以用于我想要实现的目标。但是，我在如何将其集成到下面的JS代码中遇到了麻烦。

Screenshot of index.html page

基本上发生的事情是＆＃34;定位＆＃34;按钮调用JS函数，该函数将搜索位置并计算纬度和经度。我有点不清楚AJAX请求是否可以将相同的纬度和经度值传递给控制器​​类，当相同的＆＃34;定位＆＃34;按下按钮？

的index.html 

//I've omitted snippets of irrelevant code for conciseness


<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>
</head>
<body>

<h3>Area Rating System</h3>
    <h5>Please register with a valid Username and password below!</h5>
    <form action="#" th:action="@{/}" th:object="${user}" method="post">
        <table>

            <tr>
                <td>Username &nbsp;  </td>
                <td><input type="text" th:field="*{username}" />&nbsp; &nbsp;</td>

                <td>Password  &nbsp;</td>
                <td><input type="password" th:field="*{password}" />&nbsp; &nbsp;</td>

                <td><button type="submit">Register</button>&nbsp; &nbsp;</td>
                <td><a href = "login.html">Already registered? Log in here</a></td>
            </tr>
            <tr>
            </tr>
        </table>
    </form>
    <br></br>


<form>
<div class="form-group input-group">
    <input type="text" id="search_location" class="form-control" placeholder="Search location"/>
    <div class="input-group-btn">
        <button class="btn btn-default get_map" type="submit">
            Locate
        </button>
    </div>
</div>
</form>

<!-- display google map -->
<div id="geomap"></div>

<div id="forminputs">
<table>
<tr>
<!-- display selected location information -->
<th>
<h4>Location Details</h4>
<p>Address: &nbsp; &nbsp;<input type="text" class="search_addr" size="45"/></p>
<p>Latitude: &nbsp; &nbsp;<input type="text" class="search_latitude" size="30"/></p>
<p>Longitude: <input type="text" class="search_longitude" size="30"/></p>
<p style = "height: 120px"></p>

</th>
<th style = "width: 100px">  </th>
<th>
<h4>Area Rating</h4>
<p>Average House Price: <input type="text"  size="10"/>&nbsp; &nbsp; &nbsp;<a href="#" onClick="loginAlert();">Full Report</a></p>
<p>Crime Rating: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text"  size="10"/>&nbsp; &nbsp; &nbsp;<a href="#" onClick="loginAlert();">Full Report</a></p>


</tr>
</table>
</div>
</body>

</html>

1 个答案:

答案 0 :(得分：2)

我不做jQuery，但我可以尝试使用JS给你这个方法。但是，我从未使用过Spring MVC，因此我将回答如何使用PHP进行MySQL更新。希望这可以为您提供一些想法，以便您可以根据自己选择的语言推断出所需的内容。

现在您已经拥有了所需的值：

var Lat = $('.search_latitude').val();
var Long = $('.search_longitude').val();

你希望在＆＃34;定位＆＃34;时运行AJAX功能。按下按钮，以便您可以将经度和纬度值发送到MySQL，如下所示：

<button class="btn btn-default get_map" type="submit" onclick="sendLatLong();">
        Locate
    </button>

<script>
function sendLatLong() {
var xhr = new XMLHttpRequest(); // Create our XMLHttpRequest object

var url = "toMySQL.php"; // This PHP file will query the database (MySQL)
                         // and do the comparison you want.

var coor = "lat="+Lat+"&long="+Long;
xhr.open("POST", url, true);

// Set content type header information for sending url encoded variables in the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// Access the onreadystatechange event for the XMLHttpRequest object
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var return_data = xhr.responseText;
        // For simplicty I just return whatever result into a <DIV id="status">
        // You may populate other input fields with your data 
        document.getElementById("status").innerHTML = return_data;
    }
    // Send the data to PHP now... and wait for response to update the status div
    xhr.send(coor);
    document.getElementById("status").innerHTML = "processing...";
}
</script>

现在PHP文件＆＃34; toMySQL.php＆＃34;查询数据库表并根据您刚刚发送的变量进行比较并发回结果。

如果您需要进一步说明，请与我们联系。 祝你好运！

相关问题
最新问题