Question

我在我的asp.net项目中使用谷歌地图。当我输入一些地址时，我得到建议，我选择其中一个，并显示与该地址相关的地图。这很好用。但我希望用户在第1页的自定义文本框中键入地址，然后我会在第2页上获取该输入并填充地图文本框，并在第2页上显示与地址相关的地图。

这是我如何做的

$(document).ready(function() {

    // Empty the value on page load
    $("#formattedAddress").val("");
    // variable to indicate whether or not enter has been pressed on the input
    var enterPressedInForm = false;

    var input = document.getElementById("inputName");
    var options = {
      componentRestrictions: {country: 'uk'}
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);

    $("#formName").submit(function(e) {
        // Only submit the form if information has been stored in our hidden input
        return $("#formattedAddress").val().length > 0;
    });

    $("#inputName").bind("keypress", function(e) {
        if(e.keyCode == 13) {
            // Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.

            // We change this variable to indicate that enter has been pressed in our input field
            enterPressedInForm = true;
        }
    });

    // This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        // If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
        if(autocomplete.getPlace() !== undefined) {
            $("#formattedAddress").val(autocomplete.getPlace().formatted_address);
        }
        // If enter has been pressed, submit the form.
        if(enterPressedInForm) {
            $("#formName").submit();
        }
    });
});

此致 Asif Hameed

Answer 1

您可以使用＃标签将变量发送到其他页面（或同一页面）。服务器会忽略＃右侧的任何内容，但可以通过javascript读取/设置。

与第1页一样，您有

<a href="page2.htm#25">25</a>
<a href="page2.htm#50">50</a>

这个值可以在第2页读取，如下所示：

var pos = location.hash.substr(1);

以下是表单

的示例

page1.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page 1 - type address</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script>
  $( function() {
    $('#formName').on('submit', function(e) {
      // read address
      var address = $('#formattedAddress').val();
      // add hash to page 2
      window.location = 'page2.htm#' + address;
      // prevent real submit
      e.preventDefault();
      return false;
    });
  });
  </script>
</head>
<body>
  <form id="formName">
    <input id="formattedAddress" placeholder="Enter address"/>
    <input type="submit" value="submit" />
  </form>
</body>
</html>

page2.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page 2 - populate map</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script>
  $( function() {
    if(location.hash) {
      var address = location.hash.substr(1);
      $('#test').html(address);
    }
  });
  </script>
</head>
<body>
  <div id="test"></div>
</body>
</html>

如果您在向Google地图网页上应用此功能时遇到困难，请告诉我。尝试将坐标传递给第2页。

喜欢＆＃34; page2.htm＃50.24 / 4.45＆＃34; =＆GT;

var variables = location.hash.substr(1);
var position = variables.split('/');
var lat = Number(position[0]);
var lng = Number(position[1]);

或传递搜索字符串。这也应该有用。

在第二页上显示谷歌地图

1 个答案: