Наложение Google Maps исчезает при определенном уровне масштабирования - PullRequest
Новая
       5

Наложение Google Maps исчезает при определенном уровне масштабирования

2 голосов
/ 13 сентября 2011

У меня проблема с пользовательским маркером значка наложения на картах Google. Он отлично работает на всех уровнях масштабирования, но исчезает при максимальном увеличении. В демоверсии исчезает только нижний значок, но верхний в порядке.

Демо: 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';
  };

1 Ответ

4 голосов
/ 31 августа 2012

Хорошо, понял!

Просто добавьте следующий стиль в ваш 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

...