Google Maps-在Safari中某些缩放级别上奇怪的垂直和水平线 [英] Google Maps - Strange vertical and horizontal lines at certain zoom levels in Safari

问题描述

我在使用Google地图时遇到了问题，这些奇怪的线在Safari中以某些缩放级别出现在我的地图上.如果我调整浏览器的大小，它们会消失一秒钟，然后再返回.我认为这与Google Map处于具有"margin:0 auto;"的容器内有关.当我在全幅Google Map上对其进行测试时，没有任何问题.

I'm having an issue with Google Maps where these weird lines are coming up over my map at certain zoom levels in Safari. If I resize my browser they go away for a second then come back. I think it's to do with the Google Map being inside a container which has "margin: 0 auto;" as I tested it in a full width Google Map and there were no issues.

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

JS Fiddle here: 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;
}

推荐答案

看起来无论在画布上渲染图标是一个问题.在markerOptions中设置{optimized: false}即可对其进行修复.

Looks like it is a problem with whatever is rendering the icon on canvas. Setting {optimized: false} in the markerOptions fixes it.

代码段:

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>

这篇关于Google Maps-在Safari中某些缩放级别上奇怪的垂直和水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！