第2ページにgoogleマップを表示

私のasp.netプロジェクトでgoogle mapsを使用しています。私はいくつかのアドレスを入力すると、私は示唆を得る、私はそれらの1つを選択し、マップはそのアドレスに関連して表示されます。これは正常に動作します。しかし、私はそのユーザータイプのアドレスをページ1のカスタムテキストボックスに入れて、その入力を受け取り、ページ2の地図テキストボックスとアドレスに関するページ2の地図を表示する必要があります。ここ第2ページにgoogleマップを表示

は、私はあなたがハッシュタグで他のページ（または同じページ）に変数を送信することができ、それを

$(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によって読み込み/設定できます。

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

ここでは、フォーム

ページ1と例です：あなたは、このよう

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

この値は、PAGE2で読み取ることができる持っている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>

Googleマップのウェブページにこれを適用する難しさを持っている場合を教えてください。 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

第2ページにgoogleマップを表示

答えて

関連する問題