Question

我在谷歌地图中使用自定义叠加图标标记时出现问题。它在所有缩放级别都能正常工作，但在最大变焦时会消失。在演示中只有下方图标消失，但上面的图标没问题。

演示：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';
  };

Answer 1

好的，明白了！

只需将以下样式添加到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

Google地图叠加层会在特定缩放级别消失

1 个答案: