您需要将标记创建代码移至函数中,而不是将其放在函数体中for
环形。更改此代码:
for (var i = 0; i < data.length; i++) {
var name_1 = data[i][0];
var loc = data[i][1];
...
to:
for (var i = 0; i < data.length; i++) {
addMarker( data[i] );
}
function addMarker( place ) {
var name_1 = place[0];
var loc = place[1];
...
原始代码的问题在于只有一个副本name_1
and loc
变量在所有标记之间共享,并且当您的异步代码HTMLMarker
标记在循环终止后很长时间内被调用,这些变量具有它们在最终循环迭代中的最后值。通过将该代码移动到函数中,您可以为每个循环迭代获得一个闭包,因此每个标记都有这些变量的单独副本。
此更改也恰好解决了代码中的一个微妙问题:HTMLMarker
函数被定义inside the for
环形。这在 JavaScript 中实际上是不允许的,但各种浏览器无论如何都接受它——并且不同的浏览器以不同的方式对待它。函数可以嵌套在其他函数中,但不能嵌套在循环或if
语句或类似的块。
另外我没仔细看HTMLMarker
实现,但在循环内(或现在在循环内设置构造函数和原型并不理想)addMarker()
功能)。最好将其移到外部并将数据传递到构造函数中。你有一个问题LatLng
构造函数 - 您向其传递一个字符串而不是两个数字。
您的标记 DIV 中没有任何实际文本,因此我将其更改为将名称放入标签内,并为它们添加了一些 CSS 样式,特别包括position:absolute
.
还有一些编码注释:某些地方缺少分号HTMLMarker
方法。像这样的语句末尾应该有一个分号:
HTMLMarker.prototype.onRemove = function () {};
最后,您设置标记像素位置的方式是错误的。该代码设置整个overlayLayer 窗格的位置,而不是单个标记。我还更改了第一个标记的纬度,以便在它们之间留出一点空间。
修复所有这些问题,代码如下所示:
var data = [
[ 'First_loc', '36.95781,36.63568' ],
[ 'Second_loc', '36.88827,36.636908' ]
];
function HTMLMarker( place ) {
var latLngStrings = place[1].split(',');
var lat = +latLngStrings[0];
var lng = +latLngStrings[1];
this.name = place[0];
this.pos = new google.maps.LatLng( lat, lng );
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function () {};
HTMLMarker.prototype.onAdd = function () {
var div = this.div = document.createElement('DIV');
div.className = "htmlMarker";
div.data = "data-price";
div.innerHTML = '<a href="#' + this.name + '" class="pin_on_map">' + this.name + '</a>';
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();
this.div.style.left = position.x - 30 + 'px';
this.div.style.top = position.y - 48 + 'px';
};
function initialize() {
var myLatLng = new google.maps.LatLng(36.88827, 36.636908);
var mapOptions = {
zoom: 9,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
for (var i = 0; i < data.length; i++) {
addMarker( data[i] );
}
function addMarker( place ) {
var htmlMarker = new HTMLMarker( place );
htmlMarker.setMap(gmap);
}
}
google.maps.event.addDomListener( window, 'load', initialize );
使用这个CSS:
.htmlMarker {
border: 1px solid #888;
background-color: white;
padding: 2px;
font-size: 14px;
position: absolute;
}
这是一个工作fiddle http://jsfiddle.net/geary/6qfhF/8/.