將代碼移至現有應用程序後Google地圖標記不可見

我已查看過有關丟失標記的幾篇文章，但似乎沒有解決方案適用於此處。我已經將問題簡化爲用一個具有硬編碼位置的標記呈現非常基本的地圖。 Chrome開發人員調試表明標記存在並應該可見，但不顯示。此外，我可以在給定地圖和標記的情況下實施Infowindow罰款，但標記是隱藏的。將代碼移至現有應用程序後Google地圖標記不可見

工作代碼只是這個簡單的美國地圖有一個標記，中間一個普通的網頁：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 

    <div style="height:500px" id = "map-canvas"> </div> 

    <script> 
     var myMap; 
     var marker; 

    function mapInitialize() { 
     var latlng = new google.maps.LatLng(35,-96); 
     var mapOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: 'roadmap' 
    } 

    myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    marker = new google.maps.Marker({ 
     map: myMap, 
     position: latlng, 
     title:"Hello World!", 
     visible: true 
    }); 

    google.maps.event.addDomListener(window, 'load', mapInitialize); 

</script>

現在，這裏是在骨幹地圖視圖的代碼。我還沒有實現標記集合，並懷疑我是否需要基於其他帖子。我已將所有內容都移至初始化函數中以簡化故障排除代碼。但我現在只有一點。

var MapView = Backbone.View.extend ({ 

el: "body", 

initialize: function() { 

    var myMap; 
    var marker; 
    var latlng = new google.maps.LatLng(35,-96); 
    var mapOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: 'roadmap' 
    } 

    myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    marker = new google.maps.Marker({ 
     map: myMap, 
     position: latlng, 
     title:"Hello World!", 
     visible: true 
    }); 

} 
});

平原頁（/map.html） plain page 與骨幹網（/＃/地圖，其中經由上述代碼路由呼叫創造新的MapView的） Backbone page

在Chrome開發，屬性在這兩個「標誌」：

position: df 
    B: -96 
    k: 35 
title: "Hello World! 
visible: true

此外

marker.map === myMap

的計算結果爲true，因此顯示標記正與地圖關聯。

來源

2014-10-12 bullcitydave

我的骨幹代碼是現有應用程序的一部分。爲了查看Backbone本身是否在問題中有任何作用，我將地圖視圖添加到了一個全新的Backbone應用程序，並且沒有現有應用程序的代碼。標記顯示得很好。

在檢查生成的元素的屬性後，我找到了用整個Google地圖畫布呈現標記的畫布對象。

<div style="-webkit-transform: translateZ(0px); position: absolute; left: 0px; top: 0px; 
z-index: 103; width: 100%;」> 
    <div style="position: absolute; left: 0px; top: 0px; z-index: -1;」> 
     <div style="position: absolute; left: 0px; top: 0px; z-index: 1;」> 
      <div style="width: 256px; height: 256px; overflow: hidden; 
      -webkit-transform: translateZ(0px); position: absolute; left: 230px; 
       top: 27px;」> 
       <canvas style="-webkit-user-select: none; position: absolute; 
       left: 0px; top: 0px; height: 256px; width: 256px;」>

將canvas元素的顯示樣式屬性顯式設置爲「none」以外的值可修復此問題。爲什麼我必須這樣做？由於埋在CSS這個龐大的應用程序是

canvas { 
    display: none; 
}

這是在這裏的應用程序完全無關的谷歌地圖的模塊。

來源

2014-10-13 02:56:06 bullcitydave

將代碼移至現有應用程序後Google地圖標記不可見

回答

相關問題