WP8 IE上的诺基亚JavaScript API地图平移问题
我有一个奇怪的地图交互问题与诺基亚这里JavaScript API地图与互联网浏览器的WindowsPhone8。到目前为止,我已经试过诺基亚Lumia 820和HTC 8X,它们都有相同的问题。它不会发生在桌面浏览器上 似乎只有地图交互(如平移)或覆盖控制按钮(如缩放和地图模式选择)适用于每个页面加载。第一个使用的特征有效,而另一个无效。首先平移map时,似乎map在尝试点击控件时获取事件 下面是developer.here.com的组件示例代码的基本映射。同样的问题也发生在我的代码中WP8 IE上的诺基亚JavaScript API地图平移问题,javascript,windows-phone-8,here-api,Javascript,Windows Phone 8,Here Api,我有一个奇怪的地图交互问题与诺基亚这里JavaScript API地图与互联网浏览器的WindowsPhone8。到目前为止,我已经试过诺基亚Lumia 820和HTC 8X,它们都有相同的问题。它不会发生在桌面浏览器上 似乎只有地图交互(如平移)或覆盖控制按钮(如缩放和地图模式选择)适用于每个页面加载。第一个使用的特征有效,而另一个无效。首先平移map时,似乎map在尝试点击控件时获取事件 下面是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>
适用于JavaScript的诺基亚地图API示例:带组件的基本地图
html{
溢出:隐藏;
}
身体{
保证金:0;
填充:0;
溢出:隐藏;
宽度:100%;
身高:100%;
位置:绝对位置;
}
#地图容器{
宽度:100%;
身高:100%;
左:0;
排名:0;
位置:绝对位置;
}
/*设置身份验证应用程序id和应用程序代码
*警告:这是一个仅用于演示的密钥
*请注册评估密钥、基本密钥或商业密钥,以便在应用程序中使用。
*参观http://developer.here.com/get-started 更多细节。非常感谢。
*/
nokia.Settings.set(“app_id”,“DemoAppId01082013GAL”);
诺基亚.Settings.set(“应用程序代码”,“AJKnXv84fjrb0KIHawS0Tg”);
//使用临时环境(删除生产环境的行)
诺基亚.Settings.set(“服务模式”、“cit”);
//获取要向其附加映射的DOM节点
var mapContainer=document.getElementById(“mapContainer”);
//在映射容器DOM节点内创建映射
var map=新的nokia.maps.map.Display(mapContainer{
//地图的初始中心和缩放级别
中间:[52.51,13.4],
zoomLevel:10,
组成部分:[
//ZoomBar提供了一个用户界面来放大和缩小地图
新的nokia.maps.map.component.ZoomBar(),
//我们添加了行为组件以允许平移/缩放地图
新的nokia.maps.map.component.Behavior(),
//创建用户界面,以便在街道地图卫星模式和地形地图视图模式之间轻松切换
新的nokia.maps.map.component.TypeSelector(),
//创建切换按钮以显示/隐藏地图上的交通信息
新的nokia.maps.map.component.Traffic(),
//创建切换按钮以显示/隐藏地图上的公共交通线路
新的nokia.maps.map.component.PublicTransport(),
//创建切换按钮以启用距离测量工具
新的nokia.maps.map.component.DistanceMeasurement(),
//在地图的右下角显示最小地图
新的nokia.maps.map.component.Overview(),
/*在地图的右下角显示一个比例尺
*地图上的距离与现实世界中相应距离的比率
*公里或英里
*/
新的nokia.maps.map.component.ScaleBar(),
/*定位将显示设置的“映射到我的GPS位置”UI按钮
*注意:只有当W3C地理定位API
*浏览器支持,并且如果您同意共享您的位置。
*如果找不到位置,定位按钮将重置
*恢复到初始状态
*/
新的nokia.maps.positioning.component.positioning(),
//添加ContextMenu组件,以便在鼠标右键单击/长按tap键时获得上下文菜单
新的nokia.maps.map.component.ContextMenu(),
//ZoomRectangle组件将缩放矩形功能添加到地图中
新的nokia.maps.map.component.ZoomRectangle()
]
});
/*我们创建一个UI notecontainer作为示例描述
*NoteContainer是一种用户界面辅助功能,不是诺基亚地图API的一部分
*有关实现的详细信息,请参见examplehelopers.js
*/
var noteContainer=新的noteContainer({
id:“basicMapWithComponentsUi”,
父项:document.getElementById(“uiContainer”),
标题:“带组件的基本地图示例”,
内容:
“此示例演示如何使用”+
'地图类型选择器、比例尺、公共交通按钮'+
“迷你地图、定位和缩放地图。”
});
sidenote:您混淆了HTML5和HTML4元标记声明。谢谢。不幸的是,修复它并不能解决问题。