Google 地图 API：最大宽度

Question

我在尝试修复 Google 地图 API 上 javascript 的垂直带问题时遇到问题。

事实是我只能访问由 CRM 自动加载的 jQuery。

事实上，我需要将 max-width 属性设置为 none 用于我的地图 div 中的所有 img 标签（#map-canvas).

如果我直接从 Firefox 工具编辑 HTML 代码，这会起作用，但我找不到自动完成此操作的方法。

我可以访问的代码如下所示：

var mymap;

jQuery.Class("MapView",{
    initialize:function(){
    var mapOptions = {
        center: { lat: 45.447541, lng: 11.7451883},
        zoom: 14
    };
    return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    }
},{});

jQuery(document).ready(function(){
    mymap = MapView.initialize();
});

$(window).bind("load", function() {
    $('#map-canvas').find('img').css('max-width: none');
    $("#map-canvas").hide().fadeIn('fast');
});

我尝试了很多其他在线教程，但我无法解决这个问题。

有谁知道让我摆脱困境的方法吗？

谢谢，里卡多

编辑：所以，这是我到目前为止的完整代码：

var mymap;
var mymap_markers = [];

jQuery.Class("MapView",{
    registerOnChangeEventOfSourceModule: function () {
        jQuery('#sourceModule').on('change', function (e) {
            jQuery('#picklistFields').find('option').remove().end().append('<option value="--">--</option>').val('--');

            var element = jQuery(e.currentTarget);
            var params = {};
            var sourceModule = element.val();

            params = {
                'module': 'Map',
                'action': "GetCVAjax",
                'mode': "changeModule",
                'sourceModule': sourceModule
            };

            AppConnector.request(params).then(
                function (data) {
                    if (data) {
                        jQuery.each(data.result.options, function (i, item) {
                            var o = new Option(item, i);
                            jQuery(o).html(item);
                            jQuery("#picklistFields").append(o);
                            jQuery("#picklistFields").trigger('liszt:updated');
                        });
                    }
                },
                function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            );
        });
    },

    registerOnChangeEventOfCustomView: function () {
        jQuery('#picklistFields').on('change', function (e) {
            var element = jQuery(e.currentTarget);
            var params = {};
            var cvid = element.val();
            var module = jQuery('#sourceModule').val();

            params = {
                'module': 'Map',
                'action': "GetCVAjax",
                'mode': "getMarkers",
                'sourceModule': module,
                'cvid': cvid
            };

            for (var i = 0; i < mymap_markers.length; i++) {
                mymap_markers[i].setMap(mymap);
            }
            mymap_markers = [];

            AppConnector.request(params).then(
                function (data) {
                    if (data) {
                        jQuery.each(data.result, function (i, item) {
                            var myLatlng = new google.maps.LatLng(item['coords']['lat'],item['coords']['lng']);
                            var popupcontentCV = "<table class=\"table table-condensed table-striped table-bordered\"><tr><td colspan=\"2\"><strong>"+item['title']+"</strong></td></tr>";

                            jQuery.each(item['data'], function (label, value){
                                popupcontentCV += "<tr><td>"+app.vtranslate(label,module)+"</td><td>"+value+"</td></tr>";
                            });
                            popupcontentCV += "</table>";

                            var infowindow = new google.maps.InfoWindow({
                                content: popupcontentCV,
                                maxWidth: 315,
                                maxHeight: 550
                            });

                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: mymap,
                                title: item['data']['title']
                            });

                            mymap_markers.push(marker);

                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(mymap,marker);
                            });
                        });
                    }
                },
                function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            );
        });
    },

    initialize:function(){
        var mapOptions = {
          center: { lat: 45.447541, lng: 11.7451883},
          zoom: 14
        };

        return new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    }
},{});

jQuery(document).ready(function(){
    mymap = MapView.initialize();
    MapView.registerOnChangeEventOfSourceModule();
    MapView.registerOnChangeEventOfCustomView();
});

google.maps.event.addListener(mymap, 'idle', function () {
    $('#map-canvas img').css('max-width', 'none');
});
/*
$(window).bind("load", function() {
    $('#map-canvas').find('img').css('max-width: none');
    $("#map-canvas").hide().fadeIn('fast');
});*/

Answer 1

尝试使用 CSS 规则或使用 jQuery:

CSS

#map-canvas img {
    max-width: 100%;
}

jQuery

google.maps.event.addListenerOnce(map, 'idle', function () {
    $('#map-canvas img').css('max-width', '100%');
});

我不确定您是否应该将 max-width 设置为 none 或 100%。两者都试试。如果它不能立即起作用，也许可以尝试用 !important 编写您的 CSS 规则。

对于 jQuery 版本，我在地图 idle 事件侦听器中添加了 css() 函数（因此您确定地图已加载并准备就绪）。

编辑

我无法测试你的代码，但你可以这样试试：

jQuery(document).ready(function () {

    mymap = MapView.initialize();

    google.maps.event.addListenerOnce(mymap, 'idle', function () {
        $('#map-canvas img').css('max-width', '100%');
    });

    MapView.registerOnChangeEventOfSourceModule();
    MapView.registerOnChangeEventOfCustomView();
});

Google 地图 API：最大宽度

Google Maps API: max-width

javascript

css

jquery

google-maps-api-3