ЗДЕСЬ API - карта не работает в браузере Safari - PullRequest
Новая
       6

ЗДЕСЬ API - карта не работает в браузере Safari

0 голосов
/ 28 февраля 2020

я работаю над PWA, который извлекает местоположение пользователя через geolocation-API, помещает пин-код в текущее местоположение пользователя и позволяет ему перетащить пин-код в определенное место.

это прекрасно работает в chrome, но при тестировании в сафари карта отображает только весь мир на карте и не позволяет масштабировать дальше, чем несколько точек +, маркер не помещается. 

// configure pin
function addDraggableMarker(map, behavior) {
    // create icon
    var svgMarkup = /* some random svg here */;
    var icon = new H.map.Icon(svgMarkup);

    // position the pin
    var coords = {
        lat: lat,
        lng: lng
    };

    // initialize pin
    window.marker = new H.map.Marker(
        coords, {
            icon: icon
        }, {
            volatility: true
        }
    );

    // make pin draggable
    marker.draggable = true;
    map.addObject(marker);

    // disable the default draggability of the underlying map 
    map.addEventListener('dragstart', function(ev) {
        var target = ev.target,
            pointer = ev.currentPointer;
        if (target instanceof H.map.Marker) {
            var targetPosition = map.geoToScreen(target.getGeometry());
            target.offset = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
            behavior.disable();
        }
    }, false);

    // re-enable the default draggability of the underlying map when dragging has completed
    map.addEventListener('dragend', function(ev) {
        var target = ev.target;
        if (target instanceof H.map.Marker) {
            behavior.enable();

            window.markerMoved = target.getGeometry();
        }
    }, false);

    // Listen to the drag event and move the position of the marker as necessary
    map.addEventListener('drag', function(ev) {
        var target = ev.target,
            pointer = ev.currentPointer;
        if (target instanceof H.map.Marker) {
            target.setGeometry(map.screenToGeo(pointer.viewportX - target.offset.x, pointer.viewportY - target.offset.y));
        }
    }, false);
}

// click on the button which displays the map 
$("#addLocation").on('click', function() {                                   

    // 1. connect to API
    window.platform = new H.service.Platform({
        'apikey': 'MY_API_KEY'
    });

    window.defaultLayers = platform.createDefaultLayers();

    // 2. initialize map
    window.map = new H.Map(document.getElementById('map'),
        defaultLayers.vector.normal.map, {
            center: {
                lat: lat,
                lng: lng
            },
            zoom: 16,
            pixelRatio: window.devicePixelRatio || 1
        });

    // stretch map to size of container
    window.addEventListener('resize', () => map.getViewPort().resize());

    // 3. make map interactive
    //Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    window.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    // 4. add map UI
    window.ui = H.ui.UI.createDefault(map, defaultLayers, "de-DE");

    // Add the click event listener.
    addDraggableMarker(map, behavior);               
});

1 Ответ

0 голосов
/ 04 марта 2020

Я скопировал ваш код в jsfiddle пример, и все работает в браузере Safari, как и ожидалось. После нажатия кнопки «Добавить местоположение» карта отображается в правильном месте + масштаб с маркером в центре.

Существует одна небольшая проблема с вашим кодом при создании маркера. Свойство volatility должно находиться рядом со свойством icon: 

new H.map.Marker(
    coords, {
        icon: icon,
        volatility: true
    }
);
...