Google地图 - Safari

Question

我在使用谷歌地图时出现问题，这些怪异的线路在我的地图上以某些缩放级别出现在Safari中。如果我调整浏览器大小，他们就会离开一秒钟然后再回来。我认为将谷歌地图放在一个容器内，该容器有＆＃34; margin：0 auto;＆＃34;因为我在一个全宽的谷歌地图上测试它并没有问题。

编辑：

JS小提琴：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

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

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;