无法让 domMakers 在 Here.com 地图的移动设备中可点击

Question

我使用的是 v3.0 API，我的地图在桌面浏览器中运行良好，但当我尝试在移动设备中访问它时，当我使用点击事件处理程序时它没有响应。当我在 Chrome 中点击 Android 或 Safari 中的 iOS 图标时，没有任何反应。我已经尝试使用我在 Here.com 上找到的 infoBubble 代码，当我这样做时，我可以获得图标来查看点击事件，但我无法添加我需要的标记（请参阅下面的 markupData 变量）只有一个通用的气泡，甚至没有按照我想要的样式设计，更不用说每个图标都有适当的内容了。

这是我的地图的 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);
    }

Answer 1

请确保向该部分添加元标记以获得更好的性能。

<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 时，您可能希望将 onAttach 和 onDetach 选项传递给 DomIcon 构造函数，以便为使用 DomIcon 实例的所有 DomMarker 添加事件侦听器。

Note that those callbacks are called each time the DomMarker appears on the map or disappears from the map viewport. For this reason, we recommend not to perform any expensive computations in those callbacks, otherwise, map panning and zooming performance may noticeably degrade.

有关使用 DOM 标记的最佳实践，请参考以下 link：https://developer.here.com/documentation/maps/dev_guide/topics/best-practices.html

Answer 2

我终于能够通过将以下代码添加到我的代码中来实现它：

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);

无法让 domMakers 在 Here.com 地图的移动设备中可点击

Unable to get domMakers to be clickable in mobile for Here.com map

javascript

here-api