HTML,JavaScript将输入文本框传递给javascript中的变量

因此,我正在Visual Studio中开发我的第一个Web应用程序,但遇到了麻烦。 我希望用户在文本框中输入城市名称,我的bing maps API应该转到该位置。 这是文本框的代码:

 <form action="/action_page.php">
        <label for="fname">Plaatsnaam/adres:</label>
        <br/>
        <input style="width:160px" type="text" id="fname" name="fname"><br><br>
        <button style="width:160px" type="button">Invoeren</button>
    </form>

这是API的代码。 我需要将“ where”(它目前位于纽约,您可以看到)设置为用户的输入,但我不知道该怎么做。 有人可以帮忙吗? 提前致谢!

    <div id="myMap" style='position:relative;width:auto;height:400px;'></div>
    <div id='printoutPanel'></div>


    <script type='text/javascript'>
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                /* No need to set credentials if already passed in URL */
                center: new Microsoft.Maps.Location(47.624527, -122.355255),
                zoom: 8
            });
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                var searchManager = new Microsoft.Maps.Search.SearchManager(map);
                var requestOptions = {
                    bounds: map.getBounds(),
                    where: "New York",
                    callback: function (answer, userData) {
                        map.setView({ bounds: answer.results[0].bestView });
                        map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
                    }
                };
                searchManager.geocode(requestOptions);
            });

        }


    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=MYAPIKEY&callback=loadMapScenario' async defer></script>
评论
  • ret
    ret 回复

    您可以通过2种方式执行此操作。

    1)通过添加您的表单提交参数来传递位置。您可以使用php轻松获取参数值。

    例如:/action_page.php?location =伦敦

    2)更简单的方法:利用localstorage将位置存储在浏览器的本地存储中,并在从页面加载后获取值。您还可以添加编码和解码来增加安全性。

    例如:localStorage.setItem(“ location”,location_value); //用于保存数据 例如:localStorage.getItem(“ location”); //获取数据