自定义 Google 地图未在手机和平板电脑上显示

Question

我运行遇到了一些奇怪的事情，我的自定义 Google 地图在手机或平板电脑上不可见。但在桌面上它工作正常。我无法解决问题。

我的html如下：

<div class="wrapper">
  <div id="maps-canvas"></div>
  <div class="clearfix"></div>
</div>

还有我的自定义 JS：

$(window).bind("load", function () {
    if ($('#maps-canvas').length) {
        CustomGoogleMaps();
    }
});

function CustomGoogleMaps() {
    // Creating a LatLng object containing the coordinate for the center of the map
    var latlng = new google.maps.LatLng(52.145022, 5.422421);

    var map = new google.maps.Map(document.getElementById('maps-canvas'), {
        //options
        zoom: 18, // This number can be set to define the initial zoom level of the map
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN

        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_BOTTOM
        },

        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    });

    // Detect the resize event and keep marker in center when on resize
    google.maps.event.addDomListener(window, "resize", function () {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });

    // Define Marker properties
    var imagePath = "http://google-maps-icons.googlecode.com/files/sailboat-tourism.png";
    var image = new google.maps.MarkerImage(imagePath,
        // This marker is 75 pixels wide by 101 pixels tall.
        new google.maps.Size(75, 101),
        // The origin for this image is 0,0.
        new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 18,101.
        new google.maps.Point(18, 101)
    );

    // Add Marker
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(52.145022, 5.422421),
        map: map,
        icon: image, // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
        animation: google.maps.Animation.DROP, // Animate drop effect of the marker
        position: latlng // The position should be the latlng coordinates
    });

    // Add listener for a click on the pin
    google.maps.event.addListener(marker1, 'click', function () {
        infowindow1.open(map, marker1);
    });

    // Add information window
    //change address details here
    var contentString = '<div class="map-info-box">'
    + '<div class="map-head">'
    + '<h3>Company Title</h3></div>'
    + '<p class="map-address">My Address</p>';

    var infowindow1 = new google.maps.InfoWindow({
        content: contentString,
    });

    // Create information window
    function createInfo(title, content) {
        return '<div class="maps-info-window"><strong>' + title + '</strong><br />' + content + '</div>';
    }
}

See also my working jsfiddle.

希望有人能在正确的道路上帮助我。

Answer 1

您如何对 Google 地图 API 脚本进行排队？这可能是一个时间问题。它可能在桌面上加载得更快，因此当您的代码尝试调用时它始终可用：

var latlng = new google.maps.LatLng(52.145022, 5.422421);
var map = new google.maps.Map(document.getElementById('maps-canvas') .....

库在移动设备上的加载速度可能较慢，因此在您尝试调用 google.maps 函数时脚本尚未准备好，这会导致错误，从而阻止您加载地图。

有一些方法可以确保在您尝试调用其函数之前加载您的库。这是我最近使用的一种方法：

CustomGoogleMaps = (function(){
    var googleMapsLoaded = $.Deferred(); 

    var init = function(){
        var self = this; 
        googleMapsLoaded.done( function(){
            self.initializeMap(); 
        }); 
    }

    var initializeMap = function(){
        // initialize your map here
        var map = new google.maps.Map("yourMapContainer") // etc.... 
    }

    // rest of your google maps stuff here 

    return {
        googleMapsLoaded : googleMapsLoaded,
        init : init, 
        initializeMap : initializeMap
    }
})();

然后，在您对脚本进行排队的地方，您实际上可以将回调作为参数传递，并且在 google 地图库可用后该函数将运行，如下所示：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps.googleMapsLoaded.resolve"></script>

以及您尝试初始化地图的位置：

CustomGoogleMaps.Init()

工作原理如下：

您的 JS 运行是 CustomGoogleMaps.Init() 函数。如果 GoogleMapsLoaded 承诺已经解决（意味着库已准备就绪），您的 initializeMap() 函数将继续并立即运行。如果不是，它将等待该承诺得到解决。如果它正在等待解决，一旦您的 google 地图脚本加载，它将运行

CustomGoogleMaps.googleMapsLoaded().resolve()

这将解决承诺，因此 initializeMap() 函数（当前正在等待解决承诺）将运行，您可以开始地图初始化。

编辑：

我的建议要求对您的代码进行一些相对重要的结构更改。一个更快、更简单的解决方案是将 CustomGoogleMaps 函数作为回调传递，如下所示：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps"></script>

Answer 2

这是我上述解决方案的一个更简单的替代方案：

$(window).bind("load", function () {
    // Remove this next block of code, or comment out, because I think it is calling your function before it is available
    //if ($('#maps-canvas').length) {
        //CustomGoogleMaps();
    //}
});

相反，无论您在何处对脚本进行排队，都将该函数添加为回调：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps"></script>

如果这可行，我们至少知道这是一个时间问题。

自定义 Google 地图未在手机和平板电脑上显示

Custom Google Maps not showing on mobile and tablets

javascript

mobile

jquery

device

google-maps-api-3

自定义 Google 地图未在手机和平​​板电脑上显示

Custom Google Maps not showing on mobile and tablets

javascript

mobile

jquery

device

google-maps-api-3

自定义 Google 地图未在手机和平板电脑上显示