自定义Google Maps样式在iPad上不起作用

Mike 发表于 Dev

麦克风

我正在一个网站上，该网站在首页的地图上具有一些自定义Google Maps样式。您可以在以下位置找到该网站：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}
);

我认为您的风格可以在不同的设备上使用。我将其粘贴在jsfiddle上，在android，ios和桌面上看起来都不错。另外，如果您在错误的地址上输入标签并请求桌面页面，您将获得预期的结果。

查看您的源代码，而不是Google Maps Style，我认为问题出在您的initialize_for_device代码中。您的网站在移动设备和台式机上有2个不同的div，但我认为您只有一组CSS map-canvas，但没有map-canvas_device。那可能就是问题所在。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。