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

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

$(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>

如果这样有效，我们至少知道这是一个时间问题。

Answer 2

您如何将Google Maps 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（）函数将继续并立即运行。如果不是，它将等待该承诺得到解决。如果它正在等待解析，一旦你的谷歌地图脚本加载，它将运行

CustomGoogleMaps.googleMapsLoaded().resolve()

将解析promise，因此initializeMap（）函数（当前正在等待解析的承诺）将运行，并且您可以启动映射初始化。

编辑：

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

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

自定义Google地图无法在手机和平板电脑上展示

2 个答案:

自定义Google地图无法在手机和平​​板电脑上展示

2 个答案:

自定义Google地图无法在手机和平板电脑上展示