在第二页上显示谷歌地图

我在我的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

在第二页上显示谷歌地图

回答

相关问题