Question

我正面临Google地图的问题。在页面加载时没有正确显示标记。当我们放大显示的地图时，它似乎可以用标记正确显示。

任何帮助表示赞赏。

这是javascript代码： -

var GoogleMap = function(canvas, address)
{
    var _parent = this;

    this.location = new google.maps.LatLng(-34.397, 150.644);

    var options = 
    {
        center: this.location,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        },
        streetViewControl: false
    };

    this.map = new google.maps.Map(canvas, options);

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

    geocoder.geocode( { 'address': address}, function(results, status) 
    {
        if (status != google.maps.GeocoderStatus.OK)
            return;

        _parent.location = results[0].geometry.location;

        var marker = new google.maps.Marker(
        {
            map: _parent.map,
            position: _parent.location
        }); 

        _parent.resize();
    });
};

GoogleMap.prototype.resize = function() 
{
    google.maps.event.trigger(this.map, "resize");

    this.map.setCenter(this.location);
}

var Maps = function(classes)
{

    var _parent = this;

    _parent.maps = new Array();

    classes.each(function()
    {
        _parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));  
    });
};

Maps.prototype.resize = function() 
{
    for (var cnt = 0; cnt < this.maps.length; cnt++) 
    {
        this.maps[cnt].resize();
    }
};

var maps;

$(window).load(function()
{
     maps = new Maps($(".gMapsCanvas"));
});

这是HTML代码： -

<div class="gMapsCanvas" data-address="Address,City,State,Country"></div>

Answer 1

这对我很好。你提供了什么地址。你在控制台有错误吗？

将此示例复制到普通.html文件中，您将看到它有效。然后找出整个页面的不同之处：

<!DOCTYPE html>
<html>
<head>    
    <title>Getting Zoom Demo</title>
    <style type="text/css">
        html, body{ height: 100%; height: 100%; margin: 0; padding: 0; }
        .gMapsCanvas{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    
</head>
<body>
    <div>
        <label id="display-zoom-label">

        </label>
    </div>
    <div class="gMapsCanvas" data-address="3209 West Smith Valley Road, Greenwood, IN"></div>
    <script>
        var GoogleMap = function (canvas, address) {
            var _parent = this;

            this.location = new google.maps.LatLng(-34.397, 150.644);

            var options =
            {
                center: this.location,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions:
                {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_CENTER
                },
                streetViewControl: false
            };

            this.map = new google.maps.Map(canvas, options);

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

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status != google.maps.GeocoderStatus.OK)
                    return;

                _parent.location = results[0].geometry.location;

                var marker = new google.maps.Marker(
                {
                    map: _parent.map,
                    position: _parent.location
                });

                _parent.resize();
            });
        };

        GoogleMap.prototype.resize = function () {
            google.maps.event.trigger(this.map, "resize");

            this.map.setCenter(this.location);
        }

        var Maps = function (classes) {

            var _parent = this;

            _parent.maps = new Array();

            classes.each(function () {
                _parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));
            });
        };

        Maps.prototype.resize = function () {
            for (var cnt = 0; cnt < this.maps.length; cnt++) {
                this.maps[cnt].resize();
            }
        };

        var maps;

        $(window).load(function () {
            maps = new Maps($(".gMapsCanvas"));
        });
    </script>
</body>
</html>

谷歌地图没有放大＆amp;标记未显示在页面加载上

1 个答案: