Question

function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: {lat: -33.9, lng: 151.2}
            });
            google.maps.event.addListener(map, 'tilesloaded', function () {
            document.getElementById('map-id').style.position = 'absolute' / 'fixed' / 'potato' / 'whatever';
        });
            setMarkers(map);
        }
        var beaches = [
            ['Bondi Beach', -33.890542, 151.274856, 4],
            ['Coogee Beach', -33.923036, 151.259052, 5],
            ['Cronulla Beach', -34.028249, 151.157507, 3],
            ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
            ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];

        function setMarkers(map) {
            var image = {
                url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
                size: new google.maps.Size(20, 32),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(0, 32)
            };
            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };
            for (var i = 0; i < beaches.length; i++) {
                var beach = beaches[i];
                var marker = new google.maps.Marker({
                    position: {lat: beach[1], lng: beach[2]},
                    map: map,
                    icon: image,
                    shape: shape,
                    title: beach[0],
                    zIndex: beach[3]
                });
            }
        }

我试图显示谷歌地图，但当我在浏览器中检查元素时，它显示我的位置：相对;溢出：隐藏;

谢谢！

Answer 1

我注意到的一件事是你有以下几点：

var map = new google.maps.Map(document.getElementById('map')

和

 document.getElementById('map-id').style.position = 'absolute' / 'fixed' / 'potato' / 'whatever';

如果我错了，请纠正我，但我认为你在这两个陈述中引用了包含地图的div。我创建了一个JSFiddle，其中持有地图的div的ID为＆＃39; map-id＆＃39;我在以下答案中更改了第一行代码：

var map = new google.maps.Map(document.getElementById('map-id')

我还拿出了我在答案中发布的第二行代码，因为它看起来并不相关。

我确定有一个CSS将该高度的高度设置为100％，看起来一切正常。请在这里看到我的小提琴：

https://jsfiddle.net/790ryvnf/

请注意，您需要在此代码中放置自己的API密钥才能正常工作，我出于安全考虑。

我希望这有帮助！

Google地图未显示

1 个答案: