Google地图 - Safari中某些缩放级别的奇怪垂直和水平线条

我在谷歌地图上遇到了一个问题,这些怪异的线条在我的地图上以某些缩放级别出现在Safari中.如果我调整浏览器大小,他们就会离开一秒钟然后再回来.我认为这与谷歌地图在一个容器内有关,该容器有"margin:0 auto".因为我在全宽的谷歌地图上测试它并没有问题.

编辑:

JS小提琴:http://jsfiddle.net/ojdavey/84ewc0jx/16/

HTML:

JS:

var map;

function initialize() {


var mapOptions = {
center: new google.maps.LatLng(-38.255338, 144.34334),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true,
zoomControl: true,
scrollwheel: false,
disableDefaultUI: true,
};

  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var location = new google.maps.LatLng(-38.272048, 144.479249);
  var icon1 =   'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/ISO_7010_E003_-_First_aid_sign.svg/2000px-ISO_7010_E003_-_First_aid_sign.svg.png';

var markerImage1 = {
  url: icon1,
  scaledSize: new google.maps.Size(25, 25),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(10, 12)
};
var marker = new google.maps.Marker({
  position: location,
  map: map,
  icon: markerImage1
});
}
initialize();

CSS:

#map {
background-color: #000;
height: 500px;
margin: 0 auto;
width: 350px;
}

geocodezip.. 5

看起来这是在画布上呈现图标的任何问题.{optimized: false}markerOptions中的设置可以修复它.

代码段:

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-38.255338, 144.34334),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true,
    zoomControl: true,
    scrollwheel: false,
    disableDefaultUI: true,
  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var location = new google.maps.LatLng(-38.272048, 144.479249);

  var markerImage1 = {
    url: icon1,
    scaledSize: new google.maps.Size(25, 25),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(10, 12)
  };
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: markerImage1,
    optimized: false     // <-- this fixes the artifacts
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

var icon1 = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MAgE3Aj+Oiv8AAAG0SURBVDjL5VUtTwNBEJ3Z22svtOZIKiqaYGoIGExVgwCDIMgGhcPU0j9QgUUTEhweXE0VpmlqSFoDFRiaEpqGBtr73kFcOPauWwQgIEyyyWYy8zLzZt4uPk0nrcGdzjT4hgUkist53hrc7Z4fgZFRhBApnIgKp+fUtg64zjQwMpBemgMKTwIO1XBMMzSdLyobEaobO/VyZeY5oSet8at+57BxKpT1AvBPWMimDNPImFL7ppH9JJ7Bz9lvxeLR1BLDQVQMHwEYIsW5pxgWEQBVN3ayKUNO2yysJrCKZr5W2pOxLN+96F2PXFueI9XLFXNuY4koqo+I1nKF49y+HGD7bvO+O3p+jPEV7VGiU+U9sqnnCBJ/ZSfSGlepm5R3KUtn771H+XjV78gSQYCimV/LFWS+Hl7G7WFfxnx1rYkzCxeKR7o/bJzGCkaslfYSU2sP+5XLk+Cd7NAEESCT6kJMqJ+I5psigoDEonfiP2lbZZbv2r47/XhX9VfX+goWAVz0rpv33Q+JIE6c2SLiAYAHJMBzQPWnjVw7FG3sF0Cm/Ic8EeDteHB20zQ0/TtMeSLYXll/A+p/uXC9KIizAAAAAElFTkSuQmCC";

#map {
  height: 100%;
  margin: 0 auto;
  width: 350px;
}
html,
body {
  height: 100%;
  width: 100%;
}

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-38.255338, 144.34334),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true,
    zoomControl: true,
    scrollwheel: false,
    disableDefaultUI: true,
  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var location = new google.maps.LatLng(-38.272048, 144.479249);

  var markerImage1 = {
    url: icon1,
    scaledSize: new google.maps.Size(25, 25),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(10, 12)
  };
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: markerImage1,
    optimized: false     // <-- this fixes the artifacts
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

var icon1 = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAIAAABLixI0AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB98MAgE3Aj+Oiv8AAAG0SURBVDjL5VUtTwNBEJ3Z22svtOZIKiqaYGoIGExVgwCDIMgGhcPU0j9QgUUTEhweXE0VpmlqSFoDFRiaEpqGBtr73kFcOPauWwQgIEyyyWYy8zLzZt4uPk0nrcGdzjT4hgUkist53hrc7Z4fgZFRhBApnIgKp+fUtg64zjQwMpBemgMKTwIO1XBMMzSdLyobEaobO/VyZeY5oSet8at+57BxKpT1AvBPWMimDNPImFL7ppH9JJ7Bz9lvxeLR1BLDQVQMHwEYIsW5pxgWEQBVN3ayKUNO2yysJrCKZr5W2pOxLN+96F2PXFueI9XLFXNuY4koqo+I1nKF49y+HGD7bvO+O3p+jPEV7VGiU+U9sqnnCBJ/ZSfSGlepm5R3KUtn771H+XjV78gSQYCimV/LFWS+Hl7G7WFfxnx1rYkzCxeKR7o/bJzGCkaslfYSU2sP+5XLk+Cd7NAEESCT6kJMqJ+I5psigoDEonfiP2lbZZbv2r47/XhX9VfX+goWAVz0rpv33Q+JIE6c2SLiAYAHJMBzQPWnjVw7FG3sF0Cm/Ic8EeDteHB20zQ0/TtMeSLYXll/A+p/uXC9KIizAAAAAElFTkSuQmCC";

#map {
  height: 100%;
  margin: 0 auto;
  width: 350px;
}
html,
body {
  height: 100%;
  width: 100%;
}