8

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>

しかし、何らかの理由で... Google マップのコントロールとオーバーレイが「ぼやけている」:

ぼやけたコントロール... http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

そして情報ウィンドウ...

同じことをしている情報ウィンドウ

コードを何度も確認しましたが、エラーが表示されません。コンソールにもエラーはありません。

@geocodezip は正しかった、それは css でした。基本的に、Google マップは、BootStrap が画像の最大幅を処理する方法を好みません。そのため、CSS にちょっとしたハックを入れる必要があります...

#map img {
    max-width: none;
}

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

4

1 に答える 1

10

コードにエラーはありません。cssの問題です。

この CSS をマップ コンテナーに追加するだけです (あると仮定しますid=gmap)。

#gmap img {
  max-width: none;
}
于 2012-10-04T19:03:23.520 に答える