Windows Phone 8 の Internet Explorer で Nokia Here JavaScript API マップを使用すると、マップの相互作用に関する奇妙な問題が発生します。デスクトップ ブラウザでは発生しません。
ページの読み込みごとに、マップの操作 (パンなど) またはオーバーレイ コントロール ボタン (ズームやマップ モードの選択など) のみが機能するようです。最初に使用された機能は機能しますが、他の機能は機能しません。マップが最初にパンされると、コントロールをタップしようとするとマップがイベントを取得するように見えます。
以下は、developer.here.com からのコンポーネント サンプル コードを含む基本的なマップです。私のコードでも同じ問題が発生します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<base href="http://developer.here.com/apiexplorer/examples/api-for-js/getting-started/basic-map-with-components.html" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API for JavaScript Example: Basic map with components</title>
<meta name="description" content="How to get a basic map with all UI components enabled"/>
<meta name="keywords" content="basiccomponents, getting started, basic map, components"/>
<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
<meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Styling for example container (NoteContainer & Logger) -->
<link rel="stylesheet" type="text/css" href="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.css"/>
<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<!-- JavaScript for example container (NoteContainer & Logger) -->
<script type="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="uiContainer"></div>
<script type="text/javascript" id="exampleJsSource">
/* Setup authentication app_id and app_code
* WARNING: this is a demo-only key
* please register for an Evaluation, Base or Commercial key for use in your app.
* Just visit http://developer.here.com/get-started for more details. Thank you!
*/
nokia.Settings.set("app_id", "DemoAppId01082013GAL");
nokia.Settings.set("app_code", "AJKnXv84fjrb0KIHawS0Tg");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 10,
components: [
// ZoomBar provides a UI to zoom the map in & out
new nokia.maps.map.component.ZoomBar(),
// We add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior(),
// Creates UI to easily switch between street map satellite and terrain mapview modes
new nokia.maps.map.component.TypeSelector(),
// Creates a toggle button to show/hide traffic information on the map
new nokia.maps.map.component.Traffic(),
// Creates a toggle button to show/hide public transport lines on the map
new nokia.maps.map.component.PublicTransport(),
// Creates a toggle button to enable the distance measurement tool
new nokia.maps.map.component.DistanceMeasurement(),
// Shows a min-map in the bottom right corner of the map
new nokia.maps.map.component.Overview(),
/* Shows a scale bar in the bottom right corner of the map depicting
* ratio of a distance on the map to the corresponding distance in the real world
* in either kilometers or miles
*/
new nokia.maps.map.component.ScaleBar(),
/* Positioning will show a set "map to my GPS position" UI button
* Note: this component will only be visible if W3C geolocation API
* is supported by the browser and if you agree to share your location.
* If you location can not be found the positioning button will reset
* itself to its initial state
*/
new nokia.maps.positioning.component.Positioning(),
// Add ContextMenu component so we get context menu on right mouse click / long press tap
new nokia.maps.map.component.ContextMenu(),
// ZoomRectangle component adds zoom rectangle functionality to the map
new nokia.maps.map.component.ZoomRectangle()
]
});
/* We create a UI notecontainer for example description
* NoteContainer is a UI helper function and not part of the Nokia Maps API
* See exampleHelpers.js for implementation details
*/
var noteContainer = new NoteContainer({
id: "basicMapWithComponentsUi",
parent: document.getElementById("uiContainer"),
title: "Basic map example with components",
content:
'<p>This example shows how to create a basic pannable map with a ' +
'map type selector, scalebar, public transport button, ' +
'mini map, positioning and a zoombar.</p>'
});
</script>
</body>
</html>