此处/Nokia标记并非总是显示
我有几个地图标记，是位于各地和我想要自动缩放，以显示他们的所有。
我所拥有的代码应该工作得很好，但有时(似乎取决于地图标记的位置)它并不总是正确缩放以显示标记。
下面是一个小提琴(用示例标记来显示问题)：使用以下标记位置的http://jsfiddle.net/amnesia7/9YUVe/embedded/result/：
// Add markers to the map for each location
addMarker(1, "Hello 1", [-18,178.333]);
addMarker(2, "Hello 2", [-18.5,180]);
addMarker(3, "Hello 3", [-18.5,-178.333]);自动变焦已经完全出错了，好像在某个地方被放大了。
在我看来，它是一个bug，因为它似乎取决于地图标记是否正确缩放的位置。
更新
我已经创建了一个更简单的版本，我希望它使用这里的开发人员演示“缩放到一组标记”
http://jsfiddle.net/amnesia7/uhZVz/
您需要缩放地图，以查看默认视图中的标记。
谢谢
回答 1
Stack Overflow用户
发布于 2012-12-18 14:32:29
在我看来，这也是一个bug，只有当标记在180经度线周围聚集时才会发生。在这种情况下，zoomTo()计算似乎是不正确的，只考虑到最后一个标记，因为它位于国际日期行的“错误”一侧。
无论如何，视图端口上的getWidth()看起来确实有效，因此您可以黑入您自己的zoomTo()函数，如下所示。
还要注意在加载库时使用kml=auto&map=js-p2d-dom --这使用DOM实现而不是画布实现，这正确地显示了180行经度两边的标记。
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<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>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?kml=auto&map=js-p2d-dom"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set("appId", "APP_ID");
nokia.Settings.set("authenticationToken", "TOKEN");
// 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: 13,
components: [
// We add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior()
]
});
// We create an instance of Container to store markers per city
var myContainer = new nokia.maps.map.Container();
/* We add all of the city containers to map's object collection so that
* when we add markers to them they will be rendered onto the map
*/
map.objects.add(myContainer);
// We create several of marker for a variety of famous landmarks
var firstMarker = new nokia.maps.map.StandardMarker(
[-18, 178.333],
{ text: 1 }
),
secondMarker = new nokia.maps.map.StandardMarker(
[-18.5, 180],
{ text: 2 }
),
thirdMarker = new nokia.maps.map.StandardMarker(
[-18.5, -178.333],
{ text: 3 }
);
// Add the newly created landmakers per city to its container
myContainer.objects.addAll([firstMarker, secondMarker, thirdMarker]);
/* Now we calculate the bounding boxes for every container.
* A bounding box represents a rectangular area in the geographic coordinate system.
*/
var myBoundingBox = myContainer.getBoundingBox();
zoom = 1;
map.setCenter(myBoundingBox.getCenter());
map.setZoomLevel(zoom);
while (map.getViewBounds().getWidth() > myBoundingBox.getWidth()) {
zoom++;
map.setZoomLevel(zoom);
}
zoom--
map.setZoomLevel(zoom--);
</script>
</body>
</html>https://stackoverflow.com/questions/13614385
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号