谷歌地图在 3.9 和 3.10 之间发生了变化，平铺的画布覆盖答案

【问题标题】：Google Maps changed between 3.9 and 3.10, and tiled canvas overlay谷歌地图在 3.9 和 3.10 之间发生了变化，平铺的画布覆盖
【发布时间】：2012-11-29 01:43:57
【问题描述】：

我正在研究基于

的解决方案

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（现已冻结）。

从页面中可以看出，问题是画布现在加载到“MapPane”层中，远低于其他 6 层 (Ref: MapPanes)。该层不是交互式的。

有没有人遇到过这样的问题，或者更好的是，正在使用链接中的解决方案 - 并已将其升级到 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”）的 z-index，这违背了 API 的意图...

el.map.getDiv().firstChild.firstChild.firstChild.firstChild.style.zIndex=150

我的自定义解决方案将其设置为 104，因为我使用了需要高于它的 overlayMouseTarget (105) 和 floatPane (106) 层。

在 v3.10 中，它们被重新排列如下（您可以找出 z-indexes 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 ... >

我认为正确的“修复”是将图块移动到 floatShadow MapPane，但它是否提供了 OverlayMapType 所做的平铺优势，这似乎是解决方案的基础？

【问题讨论】：

标签： html google-maps google-maps-api-3 html5-canvas

【解决方案1】：

直接访问窗格不是更好的方法。要正确获取窗格，您的代码应如下所示：

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);

【讨论】：

行不通。它将 mappane 置于所有其他之上，这也将其置于 overlayMouseTarget 和 floatPane 之上。
我的应用是based on 显示的代码，而不是the code shown in and of itself。是的，您的代码修复了特定的 jsfiddle，但没有解决第 105/106 层的使用问题。
你能告诉我你的代码吗？我不能只修复你上面显示的代码。

【解决方案2】：

好的，我发布你的整个代码。

<!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>

【讨论】：