Google地图覆盖图会在特定的缩放级别消失

问题描述

我在Google地图中遇到自定义叠加图标标记的问题。
在所有缩放级别都可以正常工作，但在最大变焦时消失。在演示中，只有下面的图标消失，但上面的图标没问题。

演示：

尝试放大下方标记，即34街道上的标记。

以下是消息来源：

  var map; 
 
函数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））; 
 
新增MyMarker（新增google.maps.LatLng（40.761231，-73.9839609），地图，A）; 
新增MyMarker（新增google.maps.LatLng（40.75013，-73.987974），地图，B）; 
} 
 
 var ICON_WIDTH = 52; 
 var ICON_HEIGHT = 52; 
 var ICON_URL =http://random.hypervolume.com/m1.png; 
 
函数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 ='绝对'; 
 
 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）'; 
  

出处问题：

I am having a problem with a custom overlay icon marker in google maps.It works fine at all zoom levels, but disappears at max zoom. In the demo only the lower icon disappears, but the upper one is ok.

Demo: http://random.hypervolume.com/map_bug.html

Try to zoom in on the lower marker, the one on 34-th street. At max zoom level it disappears.

Here is the source:

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

解决方案

Ok, got it!

Just add the following style to your div:

-webkit-transform: translateZ(0px)

You can do this in JS:

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

Origin issue: http://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=176

这篇关于Google地图覆盖图会在特定的缩放级别消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！