2

我正在开发一个网页，我只想做一些对用户更友好的东西。我有一个功能强大的 Google Maps api v3 和一个地址搜索栏。目前，我必须使用鼠标选择搜索来初始化地理编码功能。如何通过按键盘上的输入按钮并单击搜索按钮使地图返回地标？我只是想让它尽可能用户友好。

这是我为地址栏创建的 javascript 和 div：

var geocoder;
    function initialize() {
    geocoder = new google.maps.Geocoder (); 
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
                            }




           function initialize() {
        document.getElementById("address").focus(); }
    function setFocusOnSearch() {
        document.getElementById("search").focus(); }
    function codeAddress() {
        document.getElementById("address").focus(); }




    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

预先感谢您的帮助

在此处输入图像描述

4

2 回答 2

0

您需要 3 个简单的步骤：

1）等待DOM被加载/初始化地图（你已经这样做了）

<body onload="initialize()">

然后在初始化函数中：

2）将焦点设置到地址字段

document.getElementById('address').focus();

3) 监听地址字段的keyup事件并捕捉回车键码/调用codeAddress函数

// Bind key-up event listener for address field
document.getElementById("address").addEventListener('keyup', function (event) {

    // Check the event key code
    if (event.keyCode == 13) {

        // Key code 13 == Enter key was pressed (and released)
        codeAddress();
    }
});

使用onlick/ onkeyup HTML 事件属性或从您的 javascript 添加事件侦听器，但不要同时使用这两种方法。

JSFiddle demo

于 2014-10-13T20:41:01.643 回答
-1

如果我是你，我会将焦点设置为“搜索”按钮。

因此，如果我理解正确，您必须输入地址并单击搜索才能进行地理编码。

因此，为了使其尽可能用户友好，我将在加载正文期间将焦点设置为地址文本框。

然后，当您跳出地址框时，在 onleave/onblur 事件触发后，我会将焦点设置为搜索按钮。然后，您只需按 Enter 键，它就会进行地理编码。

总而言之，您需要添加这两个。：

body onload -> setfocus 到地址文本框

地址文本框 onblur/onleave -> 设置焦点到搜索按钮

第三个建议是在搜索按钮触发后将焦点设置回地址文本框，以便在不离开键盘的情况下重新开始整个过程​​。

这是有关将重点放在负载上的链接。休假也很容易使用。

加载网页时如何自动将焦点设置到文本框？

这是关于 onblur 的链接。

http://www.w3schools.com/jsref/event_onblur.asp

更新以帮助您更多。

好的，这是一个关于如何在纯 javascript 中使用 onblur 等的演示页面，通常我会使用 jquery，但我会保持简单。我尝试将其粘贴，但没有奏效。

在此处输入图像描述

好的，最后一次也是最后一次尝试，您的代码应该看起来像这样，但是需要更改 javascript 标签才能正确。

    <javascript tags>
    var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder (); 
    //Set focuse to address textbox
    document.getElementById("address").focus(); 
    }

    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
        //Either way set focus to address textbox
        document.getElementById("address").focus();
                            }


    function setFocusOnSearch() {
        //Set focus to search button now that you have left address textbox
        document.getElementById("search").focus(); }

    <javascript tags end>

    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>
于 2012-06-05T22:13:21.770 回答