javascript - Google map - Safari 中某些缩放级别出现奇怪的垂直和水平线

Question

我在使用 Google map 时遇到问题，在 Safari 中的某些缩放级别下，我的 map 上会出现这些奇怪的线条。如果我调整浏览器的大小，它们就会消失一秒钟然后再回来。我认为这与 Google map 位于具有“margin: 0 auto;”的容器内有关。因为我在全宽 Google map 中对其进行了测试，没有出现任何问题。

编辑:

JS fiddle 在这里:http://jsfiddle.net/ojdavey/84ewc0jx/16/

HTML:

<div id="map"></div>

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

Answer 1

看起来无论在 Canvas 上渲染图标都有问题。在markerOptions中设置{optimized: false}可以解决这个问题。

代码片段:

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map'></div>