模糊/损坏的 Google 地图控件 [英] Blurry / Corrupted Google Maps Controls
问题描述
我在 Google 地图应用中看到了一些非常奇怪的行为.我正在使用 Backbone:
初始化:->osmMapType = 新的 google.maps.ImageMapType(getTileUrl:(坐标,缩放)->http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png"tileSize: 新的 google.maps.Size(256, 256)isPng: 真alt: "OpenStreetMap 图层"名称:OSM"最大变焦:19)cloudMadeMapType = 新的 google.maps.ImageMapType(getTileUrl:(坐标,缩放)->http://b.tile.cloudmade.com/a97cc0871d97477b911c3f9155a93ee7/26250/256/#{zoom}/#{coord.x}/#{coord.y}.png"tileSize: 新的 google.maps.Size(256, 256)isPng: 真alt:CloudMade 层"名称:CMake"最大缩放:13)纬度 = 51.503lng = -0.113latlng = 新的 google.maps.LatLng(lat, lng)选项 =变焦:10中心:latlng地图类型 ID:'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>
但出于某种原因......谷歌地图控件和叠加层模糊":
您的代码中没有错误.你的css有问题.
只需将此 CSS 添加到您的地图容器中(假设它具有 id=gmap
):
#gmap img {最大宽度:无;}
I am seeing some really odd behaviour on my Google Maps app. I am using Backbone:
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)
I am loading the API as such:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
But for some reason... the google maps controls and overlays are "blurry":
blurry controls... http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/
and an infowindow...
I have looked over and over the code and can not see the error, there are no errors in console either.
@geocodezip was right, it was the css. Essentially Google Maps does not like the way BootStrap handels the max-width of images. So you need to put a little hack in your CSS...
#map img {
max-width: none;
}
http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/
There are no errors in your code. It is a problem with your css.
Just add this CSS in your map container (assuming it has id=gmap
):
#gmap img {
max-width: none;
}
这篇关于模糊/损坏的 Google 地图控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!