在第二頁上顯示谷歌地圖

我在我的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(); 
     } 
    }); 
});

問候，阿西夫·哈米德

來源

2017-01-24 Asif Hameed

您可以發送變量到其他頁面（或同一頁）並且加上。＃右側的任何內容都會被服務器忽略，但可以通過javascript讀取/設置。

像第1頁上你有

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

這個值可以通過第二頁讀取，像這樣：

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

這裏是你的表單

第1頁的例子.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>

告訴我，如果你將其應用到谷歌地圖網頁困難。嘗試傳遞座標到page2。

像「page2.htm＃50.24/4.45」=>

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

或者通過搜索字符串。這也應該起作用。

來源

2017-01-24 15:49:23

在第二頁上顯示谷歌地圖

回答

相關問題