0

我在使用 Windows Phone 8 的 Internet Explorer 的诺基亚 Here JavaScript API 地图时遇到了一个奇怪的地图交互问题。到目前为止，我已经尝试过诺基亚 Lumia 820 和 HTC 8X，它们都有同样的问题。它不会发生在桌面浏览器上。

似乎只有地图交互（如平移）或覆盖控制按钮（如缩放和地图模式选择）适用于每个页面加载。第一个使用的功能有效，而另一个则无效。当首先平移地图时，似乎地图在尝试点击控件时会获取事件。

下面是来自 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>
4

0 回答 0