Я использую 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);
}