Невозможно сделать так, чтобы domMaker был активным на мобильном телефоне для карты Here.com - PullRequest
0 голосов
/ 26 марта 2020

Я использую API v3.0, и моя карта отлично работает в браузере на настольном компьютере, но когда я пытаюсь получить к нему доступ в мобильном устройстве, она не отвечает, когда я использую обработчик события click. Ничего не происходит, когда я нажимаю на иконки в Chrome для Android или в Safari для iOS. Я попытался использовать код infoBubble, который нашел на Here.com, и когда я это сделаю, я смогу получить значки, чтобы увидеть события касания, но я не смог добавить нужную разметку (см. Переменную markupData ниже) только общий c пузырь, который даже не стилизован так, как мне бы хотелось, не говоря уже о наличии соответствующего содержимого на иконку.

Вот JS для моей карты:

function ShowMap() {
    // Here.com maps code
    var defaultLayers = platform.createDefaultLayers();

    var map = new H.Map(
        document.getElementById("map-canvas"),
        defaultLayers.normal.map,
        {
            zoom: 10,
            center: { lat: 52.5, lng: 13.4 }
        }
    );

    map.addEventListener("drag", showTag);

    map.addEventListener("dragend", showTag);

    map.addEventListener("dragstart", showTag);

    var mapEvents = new H.mapevents.MapEvents(map);

    var behavior = new H.mapevents.Behavior(mapEvents);

    var modelString = document.getElementById("mapModel");
    if (modelString == null) return;

    var model = JSON.parse(modelString.innerHTML);

    var group = new H.map.Group();
    for (var i = 0; i < model.length; i++) {
        var infoDiv = document.createElement("div");
        var markerPng = document.createElement("img");
        markerPng.src = "/_inc/img/Tri-MapMarker.png";
        infoDiv.style.left = "-20px";
        infoDiv.style.top = "-53px";
        var locationData = document.createElement("div");
        locationData.classList.add("locLabels");
        locationData.style.display = "none";
        var markerData = '<span class="cancelButton" onkeypress="closeTag(this)" onclick="closeTag(this)"></span>' +
            '<div class="locName"> ' +
            '<a href="' + model[i].PageUrl + '">' + model[i].Name + '</a>' +
            '</div>' +
            '<div class="locAddr">' +
            model[i].Address1 +
            '<br> ';

        if (model[i].Address2 != null && model[i].Address2 != "")
            markerData += model[i].Address2 + "<br>";

        markerData += model[i].City + ', ' + model[i].State + ' ' + model[i].Zip +
            '</div>' +
            '<a href="' + model[i].MapUrl + '" class="locDir">Get directions</a>';

        locationData.innerHTML = markerData;

        infoDiv.appendChild(markerPng);
        infoDiv.appendChild(locationData);

        var icon = new H.map.DomIcon(infoDiv, {
            onAttach: function (clonedElement, domIcon, domMarker) {
                clonedElement.childNodes[0].addEventListener('click', function (evt) {
                    clonedElement.childNodes[1].style.display = "block";
                    this.parentNode.style.zIndex = "100";
                    currentTag = this.parentNode;
                });
                clonedElement.childNodes[0].addEventListener('tap', function (evt) {
                    clonedElement.childNodes[1].style.display = "block";
                    this.parentNode.style.zIndex = "100";
                    currentTag = this.parentNode;
                });

//clonedElement.childNodes[1].addEventListener('blur', function (evt) {
                //    this.style.display = "none";
                //});
            }
        });
        var marker = new H.map.DomMarker({ lat: model[i].Latitude, lng: model[i].Longitude }, { icon: icon });

        //marker.setData(markerData);
        group.addObject(marker);
    }

    // Add the marker to the map and center the map at the location of the marker:
    map.addObject(group);

    var bounds = group.getBounds();
    var adjust = 0.01;
    if (bounds.ga > bounds.ha) {
        bounds.ga += adjust;
        bounds.ha -= adjust;
    }else {
        bounds.ga -= adjust;
        bounds.ha += adjust;
    }
    if (bounds.ja > bounds.ka) {
        bounds.ja += adjust;
        bounds.ka -= adjust;
    } else {
        bounds.ja -= adjust;
        bounds.ka += adjust;
    }

    map.setViewBounds(bounds);


    var ui = H.ui.UI.createDefault(map, defaultLayers);
    }

Ответы [ 2 ]

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

Я наконец смог добиться этого, добавив в свой код следующее:

group.addEventListener('tap', function (evt) {


        document.getElementById("locLabels" + evt.target.icon.i.firstElementChild.id).style.display = "block";
        document.getElementById("infoDiv" + evt.target.icon.i.firstElementChild.id).style.zIndex = "100";


    }, false);
0 голосов
/ 26 марта 2020

Обязательно добавьте метатег в раздел, чтобы повысить производительность.

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> 
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
        <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
</head> 

Кроме того, при использовании DomMarker вы можете wi sh передать параметры onAttach и onDetach в конструктор DomIcon для добавления прослушиватели событий для всех DomMarkers, использующих экземпляр DomIcon.

Обратите внимание, что эти обратные вызовы вызываются каждый раз, когда DomMarker появляется на карте или исчезает из области просмотра карты. По этой причине мы рекомендуем не выполнять дорогостоящих вычислений в этих обратных вызовах, в противном случае производительность панорамирования и масштабирования карты может заметно снизиться.

Пожалуйста, воспользуйтесь следующей ссылкой для получения рекомендаций по использованию маркера DOM: https://developer.here.com/documentation/maps/dev_guide/topics/best-practices.html

...