自定义谷歌地图不能在手机和平板电脑上显示

Custom Google Maps not showing on mobile and tablets

本文关键字：平板电脑 显示 手机 谷歌地图 不能 自定义      更新时间：2023-09-26

我遇到了一些奇怪的事情，我的自定义谷歌地图在手机或平板电脑上不可见。但在台式机上运行得很好。我不能明确地指出这个问题。

我的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>';
    }
}

请参阅我的工作日志

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

这里有一个更简单的替代方案:

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

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

您如何排队您的谷歌地图API脚本?这可能是时间问题。它可能在桌面上加载得更快，因此当代码试图调用:

时，它总是可用的。
var latlng = new google.maps.LatLng(52.145022, 5.422421);
var map = new google.maps.Map(document.getElementById('maps-canvas') .....

这是可能的，库是缓慢的移动加载，因此脚本还没有准备好，当你试图调用谷歌。map函数，这会导致一个错误，从而阻止您的map加载。

有一些方法可以确保在您尝试调用库的函数之前加载库。下面是我最近使用的一个方法: 
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 maps库可用后运行，像这样:

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

当你试图初始化你的map时:

CustomGoogleMaps.Init()

下面是它的工作原理:

你的JS运行CustomGoogleMaps.Init()函数。如果googlemaploaded承诺已经被解析(意味着库已经准备好了)，你的initializeMap()函数将继续并立即运行。如果不是，它将等待该承诺得到解决。如果它正在等待解析，一旦google maps脚本加载，它将运行

CustomGoogleMaps.googleMapsLoaded().resolve()

将解析promise，因此initializeMap()函数(当前正在等待promise解析)将运行，您可以开始您的map初始化。

编辑:

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

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