如何將自定義HTML地圖標記添加到諾基亞HERE地圖？

Question

從我正在讀的諾基亞地圖的文件，我可以使用基於矢量的繪圖API添加自定義標記： http://developer.nokia.com/Community/Wiki/HERE_Maps_API_-_How_to_create_custom_graphics_marker

可以創建自定義圖形標記，但只有基於一個精靈： http://heremaps.github.io/examples/examples.html#sprite-markers

或者你也可以添加自己的標記： http://developer.nokia.com/Community/Wiki/HERE_Maps_API_-_How_to_add_map_markers

但有什麼辦法可以提供HTML片段到地圖就像一個地圖標記的位置？這就是其他地圖庫的工作方式，因此我可以完全控制HTML/CSS中的地圖標記。我已經有了地圖標記，我想使用HTML/CSS中的樣式，並且不想在自定義JS中複製該樣式。

Answer 1

如果您打算使用樣式化的注入HTML，可以創建一系列自定義組件（每個標記一個）並將它們附加到map。這會爲每個組件添加一個塊級元素，您可以根據自己的需要進行設置。

這並非完全不同我用ImgTileProvider類是在API中暴露前使用簡單GroundOverlay組成部分 - 它注入一個<IMG>元素並調整對zoomLevel（你可能需要刪除），但仍有效將一段HTML附加到地圖上的特定錨點。

對於大多數簡單的應用程序，我通常會使用Markers（帶或不帶自己的肖像）或Infobubbles。這些導致更敏感和標準的用戶界面，不會混亂地圖。

function extend(B, A) { 
    function I() {} 
    I.prototype = A.prototype; 
    B.prototype = new I(); 
    B.prototype.constructor = B; 
} 

function GroundOverlay(url, boundingBox) { 
    nokia.maps.map.component.Component.call(this); 
    this.init(url, boundingBox); 
} 

extend(GroundOverlay, 
    nokia.maps.map.component.Component); 


GroundOverlay.prototype.init = function (url, boundingBox) { 
    var that = this; 
    that.overlayDiv = document.createElement('div'); 
    that.overlayDiv.style.position = 'absolute'; 
    that.overlayDiv.style.cursor = 'default'; 
    that.overlayImage = document.createElement('img'); 
    that.overlayImage.id = 'groundoverlay'; 
    that.overlayDiv.appendChild(that.overlayImage); 

    that.set('url', url); 
    that.set('boundingBox', boundingBox); 
    that.set('visible', true); 
    that.set('opacity', 1); 

    that.addOverlay = function() { 
    var isVisible = that.get('visible'), 
     bbox, 
     topLeft, 
     bottomRight; 

    if (isVisible === false) { 
     that.overlayDiv.style.display = 'none'; 
    } else { 
     bbox = that.get('boundingBox'); 
     topLeft = that.map.geoToPixel(bbox.topLeft); 
     bottomRight = that.map.geoToPixel(bbox.bottomRight); 
     that.overlayDiv.style.display = 'block'; 
     that.overlayDiv.style.left = topLeft.x + 'px'; 
     that.overlayDiv.style.top = topLeft.y + 'px'; 
     that.overlayDiv.style.width = (bottomRight.x - topLeft.x) + 'px'; 
     that.overlayDiv.style.height = (bottomRight.y - topLeft.y) + 'px'; 
     that.overlayImage.src = that.get('url'); 
     that.overlayImage.style.width = (bottomRight.x - topLeft.x) + 'px'; 
     that.overlayImage.style.height = (bottomRight.y - topLeft.y) + 'px'; 
     that.overlayImage.style.opacity = that.get('opacity'); 
    } 
    }; 

    that.addObserver('opacity', that.addOverlay); 
    that.addObserver('visible', that.addOverlay); 
    that.addObserver('url', that.addOverlay); 
    that.addObserver('boundingBox', that.addOverlay); 

    that.eventHandlers = { 
    dragListener : function (evt) { 
     var newGeo = that.map.pixelToGeo(
     that.map.width/2 - evt.deltaX, 
     that.map.height/2 - evt.deltaY 
    ); 
     that.map.set('center', newGeo); 
     evt.stopPropagation(); 
    }, 
    dblClickListener : function (evt) { 
     evt.target = this.parentNode.parentNode; 
     that.map.dispatch(evt); 
    }, 
    mouseWheelListener : function (evt) { 
     evt.target = this.parentNode.parentNode; 
     that.map.dispatch(evt); 
    } 
    }; 
}; 


GroundOverlay.prototype.attach = function (map) { 
    this.map = map; 
    var controls = map.getUIContainer().firstChild, 
    child = controls.firstChild; 
    controls.insertBefore(this.overlayDiv, child); 

    map.addObserver('center', this.addOverlay); 
    map.addObserver('zoomLevel', this.addOverlay); 

    if (!this.evtTarget) { 
    this.evtTarget = nokia.maps.dom.EventTarget(
     document.getElementById('groundoverlay') 
    ).enableDrag(); 
    this.evtTarget.addListener('drag', this.eventHandlers.dragListener); 
    this.evtTarget.addListener('dblclick', this.eventHandlers.dblClickListener); 
    this.evtTarget.addListener('mousewheel', this.eventHandlers.mouseWheelListener); 
    this.addOverlay(); 
    } 
}; 

GroundOverlay.prototype.detach = function (map) { 
    this.map = null; 
    map.removeObserver('center', this.addOverlay); 
    map.removeObserver('zoomLevel', this.addOverlay); 
    this.overlayDiv.parentNode.removeChild(this.overlayDiv); 
}; 

GroundOverlay.prototype.getId = function() { 
    return 'GroundOverlay'; 
}; 


GroundOverlay.prototype.getVersion = function() { 
    return '1.0.0'; 
};