1

我正在研究基于

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 个层（参考：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) 和(106) 层。floatPane

在 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 ... >

我认为正确的“修复”是将瓷砖移动到floatShadowMapPane，但它是否提供了 OverlayMapType 所做的平铺好处，这似乎是解决方案的基础？

4

2 回答 2

0

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

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

​</p>

于 2012-11-29T02:09:39.520 回答
0

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

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-29T01:58:37.920 回答