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

Question

我正在使用 v3.0 API 并且我的地图在桌面浏览器中工作正常，但是当我尝试在移动设备中访问它时，当我使用单击事件处理程序时它没有响应。 当我点击 Android 版 Chrome 或 iOS 版 Safari 中的图标时，没有任何反应。 我尝试使用我在 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 添加事件侦听器。

请注意，每次 DomMarker 出现在地图上或从地图视口中消失时，都会调用这些回调。 因此，我们建议不要在这些回调中执行任何昂贵的计算，否则地图平移和缩放性能可能会显着降低。

有关使用 DOM 标记的最佳实践，请参阅以下链接： 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 地图点击

问题描述

2 个解决方案

解决方案1
0 2020-03-26 06:29:42

解决方案2
0 已采纳 2020-03-28 01:16:03

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

问题描述

2 个解决方案

解决方案1 0 2020-03-26 06:29:42

解决方案2 0 已采纳 2020-03-28 01:16:03

解决方案1
0 2020-03-26 06:29:42

解决方案2
0 已采纳 2020-03-28 01:16:03