谷歌地图没有放大，标记没有显示在页面加载上

Google map is not zooming in & marker is not showing on page load

本文关键字：加载 放大 谷歌地图 显示      更新时间：2023-09-26

我遇到了谷歌地图的问题。它在页面加载时未正确显示带有标记。当我们放大显示的地图时，它似乎用标记正确显示。

任何帮助表示赞赏。

这是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>

这对我来说工作正常。你提供了什么地址。 控制台中是否有错误？

将此示例复制到纯.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>
相关文章：