0
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>
マップが初期化される前にイベントハンドラをロードするだけです。そうすれば、イベントリスナーチェーンのコードが早期に実行されるため、コードがデフォルトにならないようにすることができます。 – Tschallacka