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，但我认为您只有一套map-canvas的css，而不是map-canvas_device。这可能是问题所在。

自定义Google地图样式无法在iPad上运行

1 个答案: