Google地图：多个自定义HTML标记 [英] Google Maps: Multiple Custom HTML Markers
问题描述
我一直在研究这个小提琴，我想要一些建议。
正如您所看到的，我无法在正确的位置获取多个标记。无论我做什么，两个标记都基于第二个标记位置在 htmlMarker [i] 数组中显示。
感谢您的帮助！
作为参考，这里是JS：
var overlay;
函数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）;
函数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（）{}
//在此处初始化您的html元素
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';
}
//使用它
htmlMarker = [];
htmlMarker [0] =新的HTMLMarker（gmap.getCenter（）。k，gmap.getCenter（）。D）;
htmlMarker [1] =新的HTMLMarker（gmap.getCenter（）。k + .05，gmap.getCenter（）。D + .05）;
htmlMarker [0] .setMap（gmap）;
htmlMarker [1] .setMap（gmap）;
}
我已经更新了小提琴（参见更新） （）;并在脚本结尾。这里是输出：
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
因此，看起来正确的信息正在传入，但在某处正在被重写。
UPDATE
strong>我能够分离地图上的标记HTML元素。看起来像是嵌套在一个叠加层中：
< div style =transform：translateZ（0px）; position：绝对;左：573.317889422237px;上：139.718285949144px; z-index：104;宽度：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 - 面板的位置（它是一个单独的元素，HTMLMarker的每个实例将被追加到相同的元素/窗格中）
固定代码：
//在这里启动你的html元素
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';
}
http://jsfiddle.net/q2cnne7y/17/
I have been working on this fiddle, and I'd like some advice.
As you can see, I can't get multiple markers to render in the correct place. No matter what I do, both markers render based on the location of the second marker in the htmlMarker[i] array.
Thanks for your help!
For reference, here is the 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);
}
I have updated the fiddle (see update) to do some logging inside of HTMLMarker(); and at the end of the script. Here is the output:
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
So it looks like the correct info is getting passed in, but somewhere things are being overridden.
UPDATE
I was able to isolate the marker HTML elements on the map. Looks like they are being nested within a single overlay:
<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>
You must set the position of the images(or the div's that contain the images).
Currently you set the position of the overlayImage-pane(it's a single element, each instance of HTMLMarker will be appended to the same element/pane)
Fixed code:
//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';
}
http://jsfiddle.net/q2cnne7y/17/
这篇关于Google地图：多个自定义HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
