Question

我设法实现了显示多个标记的Google Maps Api，但是地图Div总是显示一些不良行为，如下图所示（阴影不正确，“维也纳”下有一个波浪（？！）标题，在左侧缺少控制按钮。

Google Maps Misbehavior

我在Mac上使用chrome，已经重启了我的mac几次，并且它在firefox和safari上可以重现。

我的代码如下：

<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
</head>

<div id="map" style="width:500px;height:500px;"></div>

<script type="text/javascript"> 
                    var locations = [
                      ['Vienna',48.2144203,16.383573,1]
                      ['Test',48.53234,16.32367,2]
                    ];

                    var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 13,
                      center: new google.maps.LatLng(48.2144203,16.383573),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var infowindow = new google.maps.InfoWindow();

                    var marker, i;

                    for (i = 0; i < locations.length; i++) {  
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map
                      });

                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                        }
                      })(marker, i));
                    }
</script>

Answer 1

这个问题通常来自bootstrap。只需在gmaps页面中添加内嵌样式，max-width：none;它将被修复。

<style>
       img {max-width: none !important;}
</style>

谷歌地图显示出一些不当行为

1 个答案: