模糊/损坏的Google地图控件

Question

我在Google地图应用中看到一些非常奇怪的行为。我使用的骨干：

initialize: -> 
    osmMapType = new google.maps.ImageMapType(
     getTileUrl: (coord, zoom) -> 
     "http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png" 
     tileSize: new google.maps.Size(256, 256) 
     isPng: true 
     alt: "OpenStreetMap layer" 
     name: "OSM" 
     maxZoom: 19 
    ) 

    cloudMadeMapType = new google.maps.ImageMapType(
     getTileUrl: (coord, zoom) -> 
     "http://b.tile.cloudmade.com/a97cc0871d97477b911c3f9155a93ee7/26250/256/#{zoom}/#{coord.x}/#{coord.y}.png" 
     tileSize: new google.maps.Size(256, 256) 
     isPng: true 
     alt: "CloudMade layer" 
     name: "CMade" 
     maxZoom: 13 
    ) 

    lat = 51.503 
    lng = -0.113 
    latlng = new google.maps.LatLng(lat, lng) 
    options = 
     zoom: 10 
     center: latlng 
     mapTypeId: 'OSM' 
    @gMap = new google.maps.Map(document.getElementById("map"), options) 
    @gMap.mapTypes.set('OSM', osmMapType) 
    @gMap.mapTypes.set('CloudMade', cloudMadeMapType) 
    @gMap.setMapTypeId(google.maps.MapTypeId.TERRAIN) 

我加载的API这样：

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 

但由于某些原因...谷歌地图的控制和覆盖是 “模糊”：

blurry controls... http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

和信息窗口...

我已经翻遍了代码，看不到错误，控制台中也没有错误。

---

@geocodezip是正确的，这是css。基本上谷歌地图不喜欢BootStrap处理图像最大宽度的方式。所以，你需要把一个小黑客在你的CSS ...

#map img { 
    max-width: none; 
} 

http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

Answer 1

有你的代码中没有错误。这是你的CSS问题。

地图中的容器只需添加这个CSS（假定它有id=gmap）：

#gmap img { 
    max-width: none; 
}