自定义 Google 地图样式不适用于 iPad

Question

我正在开发一个网站，该网站在主页上的地图上具有一些自定义 Google 地图样式。您可以在此处找到该站点：toptourist.com

但是，当您在 iPad（或其他平板电脑，可能）上查看网站时，地图会发生变化，并且与桌面上的样式不同。

我查看了这些文件，但看不出发生这种情况的任何原因，所以只是想知道这里是否有任何明亮的火花可以提供帮助？

构建地图的函数非常冗长，所以我不愿意将整个内容粘贴在这里，但这里有一个片段：

var mapOptions = {
    center: myLatlng,
    zoom: 12,
    scrollwheel: false,
    zoomControl: false,
    minZoom: 1,
    maxZoom: 15,
    panControl: false,
    navigationControl: false,
    scaleControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    overviewMapControl: false
};
var bounds  = new google.maps.LatLngBounds();   
var map     = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var styles  = [
{
    stylers: [
        { hue: "#765910" },
        { saturation: -20 }
    ]
},{
    featureType: "road",
    elementType: "geometry",
    stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
    ]
},{
    featureType: "road",
    elementType: "labels",
    stylers: [
        { visibility: "off" }
    ]
}
];
map.setOptions(
    {styles: styles}
);

Answer 1

我认为您的风格适用于不同的设备。我将它粘贴到 the jsfiddle 上，它在 android、ios 和桌面上看起来都不错。另外，如果您在错误的地址上切换并请求桌面页面，您会得到预期的结果。

查看您的源代码，而不是 Google 地图样式，我认为问题出在您的 initialize_for_device 代码中。您的网站有 2 个不同的 div 用于移动和桌面，但我认为您只有一组 css 用于 map-canvas，而不是 map-canvas_device。这可能是问题所在。

自定义 Google 地图样式不适用于 iPad

Custom Google Maps styling not working on iPad

google-maps

ipad

ios