键盘键不可操作

我创建了一个包含ALK卡的网页，所有工作都正常，但问题是我无法使用'+'和' - '字符或方向箭头我的页面，这些字符在地图上起作用。键盘键不可操作

而且我发现ALK网站上的同一个问题：

http://maps.alk.com/Examples/GeocodingResults

这是HTML/JavaScript代码：

感谢您的支持！

<!DOCTYPE html> 
<html> 
    <head> 
     <title>ALK Maps Examples - Geocoding Results</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0"> 

     <link href="/Content/example.styles.min.css" rel="stylesheet" /> 

     <script src="//maps.alk.com/api/1.2/alkmaps.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      var map, markerLayer; 
      function init() { 
       ALKMaps.APIKey = "17CA0885B03A6B4FADBDC3D1A51DC0BD";//You will need to replace this with your own API key 
       map = new ALKMaps.Map("map"); 
       var layer = new ALKMaps.Layer.BaseMap("ALK Maps", {}, { displayInLayerSwitcher: false }); 
       markerLayer = new ALKMaps.Layer.Markers("Markers"); 
       map.addLayers([layer, markerLayer]); 

       var center = new ALKMaps.LonLat(-75.7, 40.9).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()); //transform to mercator 
       map.setCenter(center, 7); 

      } 

      function geocode() { 
       var address = document.getElementById('geoStreet').value; 
       var city = document.getElementById('geoCity').value; 
       var state = document.getElementById('geoState').value; 
       var zip = document.getElementById('geoZip').value; 

       var params = { 
        address: 
         { 
          addr: address, 
          city: city, 
          state: state, 
          zip: zip 
         }, 
        listSize: 100, 
        async: true, 
        success: function (response) { 
         var marker, icon, lon, lat, address; 
         var display = ""; 
         for (var i = 0; i < response.length; i++) { 
          lon = response[i].Coords.Lon; 
          lat = response[i].Coords.Lat; 
          address = response[i].Address.StreetAddress; 
          icon = new ALKMaps.Icon(ALKMaps.IMAGE.FAVORITE, new ALKMaps.Size(30, 30)); 
          marker = new ALKMaps.Marker(
           new ALKMaps.LonLat(lon, lat), 
           icon, 
           address, 
           { mouseOver: true, labelOffset: "0px", map: map } 
          ); 
          markerLayer.clearMarkers(); 
          markerLayer.addMarker(marker); 


          var obj = response[i]; 
          for (field in obj) { 
           if (field === "Errors") { 
            for (var j = 0; j < obj[field].length; j++) { 
             var error = obj[field][i]; 
             for (errField in error) { 
              display = display + errField + ": " + error[errField] + ","; 
             } 
            } 
           } else { 
            var obj2 = obj[field]; 
            for (key in obj2) { 
             display = display + obj2[key] + ", "; 
            } 
           } 
          } 
          display = display + "\n\n"; 
         } 
         document.getElementById('geoResults').innerHTML = display; 
        } 

       }; 
       map.geocode(params); 
      } 
     </script> 


    </head> 
    <body onload="init()"> 
     <div id="example-container"> 

      <h1>Geocoding Results</h1> 

      <p> 
       This example demonstrates the use of the geocoding results list. After filling out the form below the map and clicking on the search button, a marker will be placed on the latitude and longitude obtained from the results and the entire results list is displayed in the text area at the bottom of the page. 
      </p> 

      <div id="map" style="width: 850px; height: 550px"></div> 


      <div class="bottom-panel"> 
      <div> 
       <label class="input"> 
        <span>Street Address</span> 
         <input class="form-control" id='geoStreet' type='text' /> 
       </label> 
      </div> 
      <div> 
       <label class="input"> 
        <span>City</span> 
        <input class="form-control" id='geoCity' type='text' /> 
       </label> 
      </div> 
      <div> 
       <label class="input"> 
        <span>State</span> 
        <input class="form-control auto-width" id='geoState' type='text' size='2' /> 
       </label> 
       <label class="input"> 
        <span>Zip</span> 
        <input class="form-control auto-width" id='geoZip' type='text' size='5' /> 
       </label> 
       <input class="btn btn-sm btn-primary" id="geoButton" type="submit" value="Search" onclick="geocode()" /> 
      </div> 
      <textarea id="geoResults" style="width: 500px; height: 150px;">  </textarea> 
     </div> 


    </div> 



</body> 
</html>

来源

2016-11-16 Jawadovic3814

只是在地图有机会被初始化之前加载你的事件处理程序。这样，你的代码就不会因为你的代码在事件监听器链中的早些时候执行而受到阻止。 – Tschallacka

我找到了解决方案，我想分享它。

var map = new ALKMaps.Map("map"); 

for (var c in map.controls) { 
    if (map.controls[c].CLASS_NAME == "ALKMaps.Control.KeyboardDefaults") 
     map.controls[c].deactivate(); 
}

来源

2016-11-16 19:52:34 Jawadovic3814

键盘键不可操作

回答

相关问题