谷歌地圖3.9和3.10，和瓷磚帆布覆蓋之間的變化

http://www.giscloud.com/sandbox/jsapi/html5/?mid=11695

第15行工作的一個解決方案，你可以看到進口（多線容易閱讀）

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

哪個在上週開始加載v3.10（發佈）而不是v3.9（現在凍結）。

從頁面可以看到的問題是，畫布現在加載在遠低於其他6層（「Ref: MapPanes」）的「MapPane」層中。該層不是交互式的。

有沒有人遇到過這樣的問題，或者更好的是，在鏈接中使用的解決方案 - 並已升級到v3.10？

JS小提琴

更多信息

在V3.9中，地圖窗格佈局爲

<div .. (parent) 
    <div .. z-index:100.. > --- << changed to 150 
    <div .. z-index:101.. > 
    <div .. z-index:102.. > 
    <div .. z-index:103.. > 
    <div .. z-index:104.. > 
    <div .. z-index:105.. > 
    <div .. z-index:106.. >

解決方案中的代碼操作第一窗格（「MapPane」），這違背了API的意圖（）的z-index的...

el.map.getDiv。 firstChild.firstChild.firstChild.firstChild.style.zIndex = 150

我的自定義解決方案將其設置爲104，而不是如我利用overlayMouseTarget（105）的和floatPane（106）層，它們需要去它上面。

在V3.10，他們已經重新安排如下（你可以做出來的z指數100-106）：

<div .. (parent) 
    <div .. z-index:200.. > 
     <div .. z-index:101.. > 
    <div .. z-index:201.. > 
     <div .. z-index:102.. > 
     <div .. z-index:103.. > 
    <div .. z-index:202.. > 
     <div .. z-index:104.. > 
     <div .. z-index:105.. > 
     <div .. z-index:106.. > 
    <div .. z-index:100.. > 
     < overlay tile divs > --<< the divs parenting the canvases in the solution 
      <canvas ... >

我認爲正確的「修復」是讓瓷磚轉移到了MapPane的floatShadow，但它是否提供了OverlayMapType所具有的平鋪好處，這似乎是解決方案的基礎？

來源

2012-11-29 RichardTheKiwi

直接訪問窗格不是更好的方法。爲了得到正確的窗格，你的代碼應該是這樣的：

var dummyLayer = new google.maps.OverlayView(); 
dummyLayer.onAdd = function() { 
    var panes = this.getPanes(); 
    console.log(panes.mapPane); 
    panes.mapPane.style.zIndex = 500; 
}; 
dummyLayer.onRemove = function() {}; 
dummyLayer.draw = function() {}; 
dummyLayer.setMap(map);

來源

2012-11-29 01:58:37 wf9a5m75

將無法工作。它將mappane放在所有其他上面，這也將它放在overlayMouseTarget和floatPane之上。 – RichardTheKiwi

真的嗎？我工作了。 – wf9a5m75

我的應用程序是基於''顯示的代碼，而不是'本身顯示的代碼'。是的，你的代碼修復了特定的jsfiddle，但沒有解決105/106層的使用問題。 – RichardTheKiwi

好吧，我發佈你的整個代碼。

<!doctype html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 
    <title>GIS Cloud HTML5 Canvas Example</title> 
    <style> 
    body, html { 
     padding: 0; 
     margin: 0; 
     overflow: hidden; 
    } 
    </style> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://api.giscloud.com/sandbox/html5c.js"></script> 

    <script type="text/javascript"> 
    var map; 

    function initialize() { 

     map = new google.maps.Map(document.getElementById("map_canvas")); 

     map.setZoom(4); 
     map.setMapTypeId('terrain'); 
     map.setCenter(new google.maps.LatLng(35.818521016151, -100.932382588817)); 

     var dummyLayer = new google.maps.OverlayView(); 
     dummyLayer.onAdd = function() { 
     var panes = this.getPanes(); 
     console.log(panes.mapPane); 
     panes.mapPane.style.zIndex = 500; 
     }; 
     dummyLayer.onRemove = function() { 
     }; 
     dummyLayer.draw = function() { 
     }; 
     dummyLayer.setMap(map); 

     var gcmap = new giscloud.Html5Map(11695, map); 
     map.overlayMapTypes.insertAt(0, gcmap); 
     map.overlayMapTypes.insertAt(0, 0); 

    } 

    </script> 

</head> 
<body onload="initialize()"> 
    <div style="text-align:center"><h2>GIS Cloud HTML5 Canvas Example</h2><p>Showing interactive HTML5 vector map overlay hosted on GIS Cloud. The original project is <a href="http://www.giscloud.com/map/11695/us-unemployment-sep-2010">here</a>. </p></div> <div id="map_canvas" style="width: 70%; height: 75%;margin:auto"></div> 
    <br /> 
    <center>requires HTML5 compatible <a href="#" onclick="return false;" title="Chrome, Firefox, Safari, IE9">browser</a> - <a href="http://www.giscloud.com/blog/realtime-map-tile-rendering-benchmark-rasters-vs-vectors/">article &amp; benchmark: rasters vs vectors</a></center> 
</body> 
</html>

來源

2012-11-29 02:09:39 wf9a5m75

谷歌地圖3.9和3.10，和瓷磚帆布覆蓋之間的變化

回答

相關問題