Здесь / Не всегда отображаются маркеры Nokia Map

У меня есть несколько маркеров карты, которые расположены повсюду, и я хочу автоматически увеличить масштаб, чтобы показать их все.

Код, который у меня есть, должен работать нормально, но иногда (кажется, зависит от того, где находятся маркеры карты), он не всегда правильно масштабируется, чтобы показать маркеры.

Вот скрипка (с примерами маркеров, показывающих проблему): 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]);

Авто-зум был полностью неправильным и, кажется, где-то увеличен в море.

Кажется, это ошибка для меня, потому что кажется, что от маркеров карты зависит, правильно ли она масштабировалась или нет.

ОБНОВИТЬ

Я создал, как я надеюсь, более простую версию, используя демо-версию ЗДЕСЬ для разработчика "Увеличение набора маркеров"

http://jsfiddle.net/amnesia7/uhZVz/

Вам необходимо уменьшить масштаб карты, чтобы увидеть маркеры, которые должны отображаться по умолчанию.

Спасибо

Источник

1 ответ

Решение

Мне это тоже кажется ошибкой, и происходит только тогда, когда маркеры группируются вокруг 180-й линии долготы. Кажется, что вычисление zoomTo() в этом случае некорректно, учитывает только последний маркер, так как он находится на "неправильной" стороне международной строки даты.

В любом случае, getWidth () в окне просмотра, кажется, работает, так что вы можете взломать свою собственную функцию zoomTo(), как показано на рисунке ниже.

Также обратите внимание на использование kml=auto&map=js-p2d-dom при загрузке библиотеки - здесь используется реализация DOM, а не реализация canvas, это правильно отображает маркеры по обе стороны от 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>
Источник
Другие вопросы по тегам