Question

我正在研究基于

的解决方案

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 Fiddle

<小时/> 更多信息

在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-index 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所做的平铺优势，这似乎是解决方案的基础？

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

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

谷歌地图在3.9和3.10之间变换，并平铺了画布覆盖

2 个答案: