gmap3在较小的屏幕上显示灰色区域

时间:2018-07-06 13:15:00

标签: javascript jquery-gmap3

我的gmap3集成存在问题。使用多个标记时,gmap3无法正确呈现:

enter image description here

在较大分辨率下,地图会正确显示。我不认为这是调整大小的问题,当您不调整大小时也会出现此问题。

我的代码:

var geocoder = new google.maps.Geocoder();

var markers = new Array();
var count = 1;

$.map(garages, function (val, i) {
    markers.push({ 
        address: val.street + " " + val.zip + " " + val.city, 
        data: "<span style='text-transform:capitalize'><strong><span style='color:#01abcf'>" + count + ". </span>" + val.name + "</strong><br />" + val.street + "<br />" + val.zip + " " + val.city + "</span>", 
        options: { 
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + count + '|01abcf|ffffff' 
        } 
    });
    count++;
});

$('#mapResults').gmap3({
    clear: {
        name: ["marker"]
    }
})

$("#mapResults").gmap3({
    map: {
        options: {
            center: [36.5085356, -4.8721181],
            zoom: 14
        }
    },
    marker: {
        values: markers,
        options: {
            draggable: false
        },
        events: {
            mouseover: function (marker, event, context) {
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({ get: { name: "infowindow" } });
                if (infowindow) {
                    infowindow.open(map, marker);
                    infowindow.setContent(context.data);
                } else {
                    $(this).gmap3({
                        infowindow: {
                            anchor: marker,
                            options: { content: context.data }
                        }
                    });
                }
            },
            mouseout: function () {
                var infowindow = $(this).gmap3({ get: { name: "infowindow" } });
                if (infowindow) {
                    infowindow.close();
                }
            }
        }
    }
});

$('#mapResults').show();

Example of the problem

谢谢!

0 个答案:

没有答案