IE9和IE10是否可以具有4缩放级别功能? [英] is it possible to have the 4 zoom level feature with IE9 and IE10?
问题描述
使用IE7，当悬停或单击缩放栏"时，将显示4个缩放级别:街道，国家/地区，郊区和州. 当我使用IE9或IE10时，此功能不存在. 我的问题是，如何在IE9和IE10上具有此功能?
Using IE7, when hovering or clicking on the Zoombar, 4 zoom levels appears: Street, Country, Suburb, and State. This features does not exist when I am using IE9 or IE10. My question is how can I have this feature with IE9 and IE10?
推荐答案
您要使用的 ZoomBar 是仅在旧版浏览器上维护的旧版组件，现代浏览器会自动显示更新，较小的缩放组件.在这里复制旧功能的唯一方法是通过向DOM中注入额外样式的< DIV> 元素来创建自己的自定义组件.
The ZoomBar you are after is a legacy component which is only maintained on older browsers, modern browsers will automatically display the newer, smaller zoom component. Your only way to duplicate the older functionality here would be to create your own custom component through injecting a extra styled <DIV> element into the DOM.
下面是将HERE Maps API与jQuery结合使用的示例.根据需要插入 app_id和app_code .
Here is an example below combining the HERE Maps API with jQuery. Insert your app_id and app_code as necessary.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<script type="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<script type="text/javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
</head>
<body>
<h1>Adding an Overlay to the map</h1>
<div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="overlay" type="text/javascript" >
nokia.Settings.set("app_id", "YOUR APP ID");
nokia.Settings.set("app_code", "YOUR APP CODE");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode", "cit");
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
// 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
});
htmlControl = new HtmlControl(
"<div id='slider' style='left:4em;top:1em;width:10px;min-height:250px'/></div>", "Sidebar");
map.components.add(htmlControl);
setUpSlider();
function setUpSlider(){
$( "#slider" ).slider({
// range: true,
min: 0,
max: 20,
orientation: "vertical",
value: 10,
slide: function( event, ui ) {
map.set("zoomLevel", ui.value);
}
});
$( "#slider" ).slider( "value", 10 );
}
</script>
</body>
</html>
自定义 ZoomBar 如下所示:
您可以根据需要在HTML中添加其他CSS样式，例如:
You can add further CSS styles to the HTML as you see fit, for example:
htmlControl = new HtmlControl(
"<div style='position:absolute'>" +
"<div id='slider' style='float:left;left:1em;top:1em;width:10px;min-height:200px;'></div> " +
"<div style='left:5em;min-width:150px;;min-height:200px;float:left; background:url(labels.png) no-repeat'></div>" +
+ "</div>", "Sidebar");
map.components.add(htmlControl);
其中的标签是指:
将显示其他标签.当然，最好留在CSS样式表中.
will display additional labels. This would obviously be better left in a CSS stylesheet of course.
这篇关于IE9和IE10是否可以具有4缩放级别功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
