我一直在研究这个小提琴,我想要一些建议。
如您所见,我无法在正确的位置绘制多个标记。无论我做什么,两个标记均基于htmlMarker[i]
数组中第二个标记的位置进行渲染。
谢谢你的帮助!
供参考,这是JS:
var overlay;
function initialize() {
var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
var mapOptions = {
zoom: 11,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
function HTMLMarker(lat,lng){
this.lat = lat;
this.lng = lng;
this.pos = new google.maps.LatLng(lat,lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove= function(){}
//init your html element here
HTMLMarker.prototype.onAdd= function(){
div = document.createElement('DIV');
div.className = "htmlMarker";
div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">';
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
HTMLMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
panes.overlayImage.style.left = position.x + 'px';
panes.overlayImage.style.top = position.y + 'px';
}
//to use it
htmlMarker = [];
htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D);
htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05);
htmlMarker[0].setMap(gmap);
htmlMarker[1].setMap(gmap);
}
我已经更新了小提琴(请参阅更新)以在HTMLMarker()中进行一些记录。并在脚本末尾。这是输出:
HTMLMarker(lat,lng)= 62.323907, -150.10929099999998
HTMLMarker(lat,lng)= 62.373906999999996, -150.05929099999997
HTMLMarker.prototype.draw=500.5001116444473, 296.6240725676762
HTMLMarker.prototype.draw=573.3178894222365, 139.71828594914405
因此,似乎传递了正确的信息,但是某些地方被覆盖。
更新
我能够隔离地图上的标记HTML元素。看起来它们嵌套在单个叠加层中:
<div style="transform: translateZ(0px); position: absolute; left: 573.317889422237px; top: 139.718285949144px; z-index: 104; width: 100%;">
<div class="htmlMarker">
<img src="http://www.vcsd.org/img/icon/red.png">
</div>
<div class="htmlMarker">
<img src="http://www.vcsd.org/img/icon/red.png">
</div>
</div>
您必须设置图像的位置(或包含图像的div的位置)。
当前,您设置overlayImage
-pane的位置(它是一个元素,每个HTMLMarker实例将附加到同一元素/窗格)
固定代码:
//init your html element here
HTMLMarker.prototype.onAdd= function(){
this.div = document.createElement('DIV');
this.div.className = "htmlMarker";
this.div.style.position='absolute';
this.div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">';
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
}
HTMLMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var panes = this.getPanes();
this.div.style.left = position.x + 'px';
this.div.style.top = position.y + 'px';
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句