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の 5 つのイベントにイベント リスナーを追加しました。必要な効果によっては、すべてを必要としない場合があります。この行 evt.cancel();は、イベントの処理を停止します。

于 2013-02-11T11:55:29.740 に答える