Pegman模糊了

我試圖在Google Maps JavaScript API v3中使用StreetViewPanoramio功能，我無法使街景視圖控件正常工作。起初我以爲佩格曼沒有出現，然後我意識到這是一個模糊的廣場。街道視圖控件不會顯示在地圖上。 Map和StreetView都是以其他方式工作的 - 既加載又顯示正確的位置。我目前正在Chrome中進行測試。Pegman模糊了

我有一個地圖和一個streetview panoramio並排，我試圖按照documentation的示例。我知道模糊廣場是佩格曼，因爲我可以抓住它並移動它，它的行爲就像佩格曼應該的。我在地圖上也有一個標記，其行爲如預期。

The big fuzzy square on the left edge of the map is the pegman

我的HTML是非常簡單的：

<div class="maps-area"> 
    <div id="mapCanvas"/> 
    <div id="streetViewCanvas"/> 
</div>

我的JavaScript是幾乎一樣的例子：

//note: center is a valid google.maps.LatLng object. 
//Setup the panoramio 
var panoOptions = { 
    position: center, 
    pov: { 
    heading: 0, 
    pitch: 10 
    } 
}; 

var svElement = document.getElementById("streetViewCanvas"); 
_panorama = new google.maps.StreetViewPanorama(svElement, panoOptions); 

//Setup the map 
var mapOptions = { 
    center: center, 
    zoom: 12, 
    streetViewControl: true, 
    streetView: _panorama, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

_map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

來源

2013-10-15 Brian S

max-width：none;在地圖畫布上。 – dandavis

謝謝@dandavis - 設置最大寬度：無;在畫布上沒有解決它，但它導致我在正確的方向，並在[這個答案]的幫助（http://stackoverflow.com/questions/7101473/pegman-has-disappeared-from-my-地圖），我從Bootstrap的'img'風格中移除了最大寬度：100％，並且它確實解決了這個問題。 –

隨着this answer的幫助和丹的評論上方，我能夠追蹤到max-width：100％樣式應用於地圖上的圖像的問題。

Bootstrap.css定義了這個風格img：

img { 
    width: auto\9; 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}

這是造成問題的原因。我分配了一個map-canvas類我mapCanvas元素，然後創建了這個風格重寫引導的風格：

.map-canvas img{ 
    max-width: none; 
}

和街景控制和衣夾正確呈現。

來源

2013-10-15 16:29:55

回答

相關問題