我在使用谷歌地图自定义叠加标记时遇到了问题。它在所有缩放级别下都能正常工作,但在最大缩放级别下消失。在演示中,只有下面的标记消失了,而上面的标记还好。请尝试放大位于34街的下方标记,最大缩放级别下它会消失。
以下是源代码:
以下是源代码:
Demo: http://random.hypervolume.com/map_bug.html
var map;
function init() {
var opts = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById('mapcanvas'), opts);
map.setCenter(new google.maps.LatLng(40.761231, -73.9839609));
new MyMarker(new google.maps.LatLng(40.761231, -73.9839609), map, "A");
new MyMarker(new google.maps.LatLng(40.75013, -73.987974), map, "B");
}
var ICON_WIDTH = 52;
var ICON_HEIGHT = 52;
var ICON_URL = "http://random.hypervolume.com/m1.png";
function MyMarker(position, map, id) {
this.id = id;
this.position = position;
this.map = map;
this.setMap(map);
}
MyMarker.prototype = new google.maps.OverlayView();
MyMarker.prototype.onAdd = function() {
var div = this.div = document.createElement('DIV');
div.id = this.id;
div.style.width = ICON_WIDTH;
div.style.height = ICON_HEIGHT;
div.style.position = 'absolute';
var image = new Image();
image.src = ICON_URL;
div.appendChild(image);
this.getPanes().overlayMouseTarget.appendChild(div);
};
MyMarker.prototype.draw = function() {
var pos = this.getProjection().fromLatLngToDivPixel(this.position);
pos.x -= ICON_WIDTH / 2;
pos.y -= ICON_HEIGHT / 2;
this.div.style.top = pos.y + 'px';
this.div.style.left = pos.x + 'px';
};