Question

我有一个脚本正在使用infowindow向地图添加标记。问题是图像很小，但是当你检查并悬停在img实体上时，大小是正确的，并且显示画布在主窗口中所处位置的蓝框是正确比例的，它只是实际的图像占据画布的一小部分。

我不知道造成这种情况的原因。使用开发人员工具我删除了所有似乎影响它的CSS并且没有任何变化，除非我删除100％宽度，然后画布变为全尺寸，但图像仍然只是画布的一小部分。

这是Javascript

var startLat = 20;
var startLng = 0;
var startZoom = 2;
var isAddress = false;
var distributors = [{"logo":"http:\/\/www.elecro.demomycms.co.uk\/eshop\/files\/images\/distributor-logos\/5.jpg","name":"AG Budget Swimming Pool & Spas","contactNumber":"020 89416618","address":"Unit 10 Wilden Industrial Estate\nWilden Lane\nStourport on Severn\nWorcestershire","postcode":"DY13 9JY","latitude":"52.3504","longitude":"-2.26002"}];
var map;
var geocoder;

$(function () {

    var mapOptions = {
        zoom: startZoom,
        center: new google.maps.LatLng(startLat, startLng)
    }
    var marker, i;

    $('#map-canvas').height($('#map-canvas').width() / 2);
    var mapOptions = {
        zoom: startZoom,
        center: new google.maps.LatLng(startLat, startLng)
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    if ( ! isAddress && $('#country').val() > 0) {
        GeocodeCountry();
    }

    for (i = 0; i < distributors.length; i++) {
        var $distributor = distributors[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($distributor.latitude, $distributor.longitude),
            map: map
        });
        var infowindow = new google.maps.InfoWindow();
        marker.html = '<div class="container-fluid" style="width: 300px">\
            <h1 class="row-fluid">\
                '+($distributor.logo ? '<div class="span3"><img src="'+$distributor.logo+'" style="width: 100%"></div>' : '')+'\
                <span class="span9">'+$distributor.name+'</span>\
            </h1>\
            <div class="row-fluid">\
                <div class="span6">'+$distributor.address+'<br>'+$distributor.postcode+'</div>\
                <div class="span6">'+($distributor.url ? '<a href="'+$distributor.url+'">'+$distributor.url+'</a>' : '')+'<br>'+$distributor.contactNumber+'</div>\
            </div>\
        </div>';

        google.maps.event.addListener(marker, 'click', (function() {
            return function() {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            }
        })(marker, i));
    }

});

function GeocodeCountry() {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': $('#country').find('option:selected').text()}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.fitBounds(results[0].geometry.viewport);
        }
    });
}

您可能已经注意到HTML中的Bootstrap 2代码，我们在网站上使用了Bootstrap 2，但是我没有在下面的小提琴中包含任何CSS / JS文件，它仍然是做同样的事情，所以它不是影响它的Bootstrap。

你可以在这里看到一个JS小提琴：http://jsfiddle.net/styphon/raLcmbvc/

我只在JS Fiddle中包含了一个示例标记，但在网站上有超过200个，并且它对所有这些都做了同样的事情。如果您想查看以下内容，请访问此网站：http://elecro.demomycms.co.uk/distributors.php

Answer 1

这里的问题是你显示的图像本身就是白色的大部分！请参阅链接：http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg并尝试保存图片并查看其尺寸。它是一个巨大的1433x755大小的图像，其中几乎90％的区域是白色背景。因此，通过裁剪图像来移除额外的白色背景，你应该很高兴去。休息一切似乎很好。您可以通过提供适当的宽度来调整代码行<div class="container-fluid" style="width: 300px">中的图像大小，但首先要更改图像。

Answer 2

您的测试图片非常庞大，并且右下角还包含大量空格：http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg

然后您还将width:100% CSS应用于您的图片，因此它会调整大小以适应窗口。

根据您想要达到的目标，您可以：

infowindow中的Google Map图像非常小

2 个答案: