谷歌地图覆盖图在某些缩放级别消失

问题描述：

我在谷歌地图中的自定义覆盖图标标记有问题。它在所有缩放级别都能正常工作，但在最大变焦时消失。在演示中，只有下面的图标消失，但上面的图标没问题。谷歌地图覆盖图在某些缩放级别消失

演示：http://random.hypervolume.com/map_bug.html

尝试放大下标记时，一个在34个街道。在最大缩放级别消失。

这里是源：

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'; 
    };

答

好，知道了！

只是下面的样式添加到您的div：

-webkit-transform: translateZ(0px)

你可以在JS做到这一点：

div.style.webkitTransform = 'translateZ(0px)';

产地问题：http://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=176

谷歌地图覆盖图在某些缩放级别消失

相关推荐