谷歌地图缩放控件和标记消失

Question

我在谷歌地图上遇到了两个非常奇怪的问题，似乎只出现在Chrome/Mac和Chrome/Windows上：

1. 如果你点击位于科罗拉多州的第一个标记并尝试向右移动鼠标来平移地图，你会发现缩放控件开始消失。我已经尝试使用max-width:none;修复它，所以这不是同一个bug。

2. 如果你点击位于斯科普里的右侧标记，你会发现在缩放级别20时标记会消失。

更新：如果我在Chrome上禁用硬件加速，则可以解决这两个问题，因此我认为这更像是Chrome问题而不是谷歌地图问题。

以下是jsfiddle链接，可重现该问题：http://jsfiddle.net/sokarovski/rx74P/2/

var posSkopje = new google.maps.LatLng(42.007652282715,21.372894287109034);
var posColorado = new google.maps.LatLng(38.960487365723,-104.76946258545001);

google.maps.visualRefresh = false;
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    maxZoom: 20
});

var markerSkopje = new CustomMarker('img.svg');
markerSkopje.setPosition(posSkopje);
markerSkopje.setMap(map);

var markerColorado = new CustomMarker('img.svg');
markerColorado.setPosition(posColorado);
markerColorado.setMap(map);

var zoomOnClick = function(arg1) {
    map.setCenter(this.getPosition());
    map.setZoom(22);
}

google.maps.event.addListener(markerColorado, 'open', jQuery.proxy(zoomOnClick, markerColorado));
google.maps.event.addListener(markerSkopje, 'open', jQuery.proxy(zoomOnClick, markerSkopje));

- thejigsaw

Answer 1

这篇文章已经相当老了，但问题仍然存在。对于其他人，如果遇到这个问题，你可以这样做：

从谷歌上制作一个 Markermanager.js 的本地副本，并修改此行（第107行） 原始代码： me.maxZoom_ = opt_opts.maxZoom || 19; 修改后的代码： me.maxZoom_ = opt_opts.maxZoom || 21;

- AliR

Answer 2

代码中有一些问题，请看这里

//=========== > Custom Marker Class
function CustomMarker(opts) {
    this.location_ = null;
    this.div_ = null;
    this.inner_ = null;
    this.opts = {
        image:      null
    }
    this.constructor = function(image) {
        this.inner_ = document.createElement('img');
        jQuery(this.inner_).addClass('thumb').click(jQuery.proxy(this.onPinClick, this));
        if (image) this.setImage(image);
    }
    this.setPosition = function(ll) {
        this.location_  = ll;
    }
    this.getPosition = function() {
        return this.location_;
    }
    this.onAdd = function() {
        var div = document.createElement('div');
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.appendChild(this.inner_);
        this.div_ = div;
        var panes = this.getPanes();
        panes.overlayMouseTarget.appendChild(div);
    }
    this.onPinClick = function(e) {
        google.maps.event.trigger(this, 'open');
    }
    this.draw = function() {
        var overlayProjection = this.getProjection();
        if (overlayProjection) {
            var pixPosition = overlayProjection.fromLatLngToDivPixel(this.location_);
            this.div_.style.left = (pixPosition.x ) + "px";
            this.div_.style.top = (pixPosition.y) + "px";
        }
    }
    this.setImage = function(image) {
        this.inner_.src = image;
    }
    this.constructor.apply(this, arguments);
}
CustomMarker.prototype = new google.maps.OverlayView();
//=========== > Initialization 
var posSkopje = new google.maps.LatLng(42.007652282715,21.372894287109034);
var posColorado = new google.maps.LatLng(38.960487365723,-104.76946258545001);

var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 3,
    mapTypeId: google.maps.ROADMAP,
    maxZoom: 20
});

var markerSkopje = new CustomMarker('http://www.gnhl.ca/images/pushed-pin-hi.png');
markerSkopje.setPosition(posSkopje);
markerSkopje.setMap(map);

var zoomOnClick = function(arg1) {
    map.setCenter(this.getPosition());
    map.setZoom(20);
}

google.maps.event.addListener(markerSkopje, 'open', jQuery.proxy(zoomOnClick, markerSkopje));

- qwertmax

---

是的，使用单个标记符号可以正常工作，但问题在于如果您放置多个标记符号，它将无法正常工作。我还注意到，如果我关闭Chrome上的硬件加速，则两个错误都会得到修复。因此，这可能是Chrome而不是Google Maps的问题。 - thejigsaw