Question

我想将地图中心坐标保持在一定的范围内。为此，我在setCenter相关的回调函数中调用"center"方法：

map.addObserver("center", function (obj, key, newValue, oldValue) {

  var limits = {minLat: 47.4136, minLon: 5.9845, maxLat: 54.8073, maxLon: 14.3671};

  if (newValue.latitude < limits.minLat || newValue.longitude < limits.minLon || 
      newValue.latitude > limits.maxLat || newValue.longitude > limits.maxLon) {

      var newLatLon = {latitude:  Math.max(Math.min(newValue.latitude, limits.maxLat), limits.minLat),
                       longitude: Math.max(Math.min(newValue.longitude, limits.maxLon), limits.minLon)};

      map.setCenter(nokia.maps.geo.Coordinate.fromObject(newLatLon));

      console.log(newValue);
      console.log(map.center);
  }
});

如果我将地图拖到极限之外，我会在控制台中看到正确调整了map.center，但newValue坐标一直超出极限。

我是否误解了API？

我正在使用http://api.maps.nokia.com/2.2.3/jsl.js?with=all

Answer 1

将一个观察者添加到一个属性，然后在中更改该属性，观察者函数不能保证适用于所有属性。我的理解是不支持重新设置中心以避免无限循环。在这种情况下，最好使用event framework而不是观察者。

以下代码将地图中心限制在以德国为中心的矩形内。如果你拖动地图它将停止死亡，如果你轻弹地图它会反弹。您需要获得自己的免费app id and token才能使其正常运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
        <title>Nokia Maps API Example: Restricted Area</title>
        <!-- KML support is required here. -->
        <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>


</head>


<style type="text/css">
            html {
                overflow:hidden;
            }

            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: absolute;
            }

            #mapContainer {
                width: 80%;
                height: 80%;
            }
        </style>
    </head>
    <body>      
        <div id="mapContainer"></div>
        <script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
            nokia.Settings.set( "appId", "APP ID"); 
            nokia.Settings.set( "authenticationToken", "TOKEN");
//          
/////////////////////////////////////////////////////////////////////////////////////   
        </script>
        <div id="uiContainer"></div>
        <script>

var mapContainer = document.getElementById("mapContainer");
var map = new nokia.maps.map.Display(mapContainer, {
    center: [51, 7],
    zoomLevel: 6
    });

map.addComponent(new nokia.maps.map.component.Behavior());  
var dragger = map.getComponentById("panning.Drag");    


// Set of initial geo coordinates to create the purple polyline
var points = [
        new nokia.maps.geo.Coordinate(47.4136, 5.9845),
        new nokia.maps.geo.Coordinate(47.4136, 14.3671),
        new nokia.maps.geo.Coordinate(54.8073, 14.3671),
        new nokia.maps.geo.Coordinate(54.8073, 5.9845),
        new nokia.maps.geo.Coordinate(47.4136, 5.9845)
    ];

// Transparent purple polyline
map.objects.add(new nokia.maps.map.Polyline(
    points,
    {   
        pen: {
            strokeColor: "#22CA", 
            lineWidth: 5
        }
    }
)); 



var restrict = function(evt) {   

     var limits = {minLat: 47.4136, minLon: 5.9845, maxLat: 54.8073, maxLon: 14.3671};

  if (map.center.latitude < limits.minLat || map.center.longitude < limits.minLon || 
      map.center.latitude > limits.maxLat || map.center.longitude > limits.maxLon) {

      var latitude =  Math.max(Math.min(map.center.latitude, limits.maxLat), limits.minLat);
      var longitude = Math.max(Math.min(map.center.longitude, limits.maxLon), limits.minLon);    
      map.setCenter(new nokia.maps.geo.Coordinate(latitude,longitude));      
      evt.cancel();
  }
}


map.addListener("dragend", restrict);
map.addListener("drag", restrict);
map.addListener("mapviewchange", restrict);
map.addListener("mapviewchangeend", restrict);
map.addListener("mapviewchangestart", restrict);


 </script>
    </body>
</html>

我在这里添加了五个事件的事件监听器， dragend ，拖动， mapviewchange ， mapviewchangeend 和< strong> mapviewchangestart - 根据您需要的效果，您可能不需要它们。第evt.cancel();行阻止事件被处理。

setCenter在“center”事件回调中

1 个答案: