0

我想将地图中心坐标保持在一定范围内。为此，我在相关回调函数中调用该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

4

1 回答 1

1

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

下面的代码将地图的中心限制在以德国为中心的矩形内。如果你拖动地图，它会停止死机，如果你轻弹地图，它会反弹回来。您需要获取自己的免费应用程序 ID 和令牌才能使其正常工作。

<!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、drag、mapviewchange、mapviewchangeend和mapviewchangestart - 根据您需要的效果，您可能不需要全部。该行 evt.cancel();停止处理事件。

于 2013-02-11T11:55:29.740 回答