Javascript 如何将自定义HTML地图标记添加到诺基亚HERE地图?
通过阅读有关诺基亚地图的文档,我可以使用基于矢量的绘图API添加自定义标记: 您可以创建自定义图形标记,但只能基于精灵: 也可以添加它们自己的标记:Javascript 如何将自定义HTML地图标记添加到诺基亚HERE地图?,javascript,html,css,here-api,Javascript,Html,Css,Here Api,通过阅读有关诺基亚地图的文档,我可以使用基于矢量的绘图API添加自定义标记: 您可以创建自定义图形标记,但只能基于精灵: 也可以添加它们自己的标记: 但是,有没有办法提供一个HTML片段,像地图标记一样在地图上定位呢?这就是其他地图库的工作方式,因此我可以完全控制HTML/CSS中的地图标记。我已经有了我想使用的HTML/CSS样式的地图标记,不想在自定义JS中复制该样式。如果您打算使用样式化的注入HTML,可以创建一系列自定义组件(每个标记一个)并将它们附加到地图。这将为每个组件注入一个
但是,有没有办法提供一个HTML片段,像地图标记一样在地图上定位呢?这就是其他地图库的工作方式,因此我可以完全控制HTML/CSS中的地图标记。我已经有了我想使用的HTML/CSS样式的地图标记,不想在自定义JS中复制该样式。如果您打算使用样式化的注入HTML,可以创建一系列自定义组件(每个标记一个)并将它们附加到
地图。这将为每个组件注入一个块级元素,您可以根据需要设置样式
这与我在API中公开类之前使用的简单的GroundOverlay
组件并没有完全不同-它注入了
元素,并在zoomLevel
上调整大小(您可能需要删除),但仍然有效地将一段HTML附加到地图上的特定锚定点
对于大多数简单的应用程序,我通常会使用(带或不带我自己的图像)或尽管。这将产生一个更具响应性和标准化的用户界面,并且不会使地图变得混乱
您也可以根据自己的情况添加标记,而无需使用精灵或组合或使用-其中任何一种对您有用吗?不,因为我想在CSS中保留地图标记的样式,我不想以其他方式复制地图标记的渲染(vector/svg/image)而不是我已经在应用程序的其他区域使用图标字体和CSS来实现它。这样,如果我更新样式,我就不必在两个地方进行更新。谢谢你!这正是我需要的。非常感谢!
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';
};