我可以获得完全位于Clickable Marker Layer后面的Unclickable geoxml3 Shadow Layer吗?

时间:2014-08-13 10:29:50

标签: layer shadow geoxml3

为了获得可点击的标记和不可标记的标记,我设置了两个geoxml3解析器,一个用于标记,另一个用于阴影。这是有效的,但我希望有两层也可以让我保持一个标记的阴影落在另一个标记上。这是一个微妙的事情,但在视觉上垂直的标记上叠加一个视觉上水平的阴影削弱了三维效果。在一组标记物中,标记物中的物质变得非常模糊。

现在,我得到的图标是从北向南渲染的,因此图标会在其南边的重叠图标的顶部窥视。我期待的是每个解析器都会创建自己的图层,因为标记图层将完全出现在前一个阴影图层的前面,没有阴影落在任何标记上。但是,看起来,就像解析器在两个"层和#34;同时。在向下移动到下一个点之前,它们似乎为每个点渲染阴影图像,然后渲染相应的标记图像。如果下一个标记非常接近前一个标记的西南方向,则其阴影图像将落在前一个标记上。

为了确保我没有看到某种幻觉,作为我放在一起的练习a map with a couple of big, overlapping shadowed markers。我希望的是将图像分层,自下而上:

  1. 东格陵兰阴影
  2. 格陵兰阴影
  3. 东格陵兰标记
  4. 格陵兰标记
  5. 相反,它们似乎是分层的:

    1. 东格陵兰阴影
    2. 东格陵兰标记
    3. 格陵兰阴影
    4. 格陵兰标记
    5. 格陵兰阴影落在东格陵兰标记上。

      那么,我可以将所有标记集体显示在所有阴影的前面吗?我目前无法追踪它,但我相信我在某处看到了一个标准的Google地图图层列表,其中包括类似不可点击的" Shadow Layer"。当我使用标准图标创建google.maps.KmlLayer时,API会自动提取相应的阴影图像,并将其放置在我猜的阴影图层上,该图层完全位于我要求的KmlLayer之后。

      在我目前的项目中,我需要一个geoxml3标记图层,因此我可以以编程方式访问地标。由于我实际上可以使用32x32图标,在这种情况下我可以回退使用KmlLayer作为阴影,但是为了将来参考,选择一个完全位于可点击后面的不可点击的geoxml3层会很棒层。有没有办法做到这一点?这会是以某种方式渲染到Google Maps Shadow Layer吗?

      这是脚本:

              function initialize() {
                  var mapOptions = {
                      center: new google.maps.LatLng(71, -45),
                      zoom: 4,
                      preserveViewport: true
                  };
                  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      
                  // Shadow Layer
                  var shadow = new geoXML3.parser({
                      map: map, 
                      zoom: false, 
                      markerOptions: {clickable: false}
                  });
                  shadow.parse('greenland_shadow_5.kml');
      
                  // Marker Layer
                  var blues = new geoXML3.parser({
                      map: map, 
                      singleInfoWindow: true, 
                      zoom: false, 
                      suppressDirections: true,
                      markerOptions: {
                          shape: {
                              type: 'circle', 
                              coords: [38,38,38]
                          }
                      }
                  });
                  blues.parse('greenland_5.kml');
      
              }
      
              google.maps.event.addDomListener(window, 'load', initialize);
      

      除了IconStyles之外,两个KML文件是相同的:

              <IconStyle>
                  <Icon>
                      <href>bluemarker_76x128.png</href>
                      <scale>1.0</scale>
                  </Icon>
                  <hotSpot x="38" y="0" xunits="pixels" yunits="pixels" />
              </IconStyle>
      

              <IconStyle>
                  <Icon>
                      <href>markershadow_188x128.png</href>
                      <scale>1.0</scale>
                  </Icon>
                  <hotSpot x="96" y="0" xunits="pixels" yunits="pixels" />
              </IconStyle>
      

1 个答案:

答案 0 :(得分:0)

您可以使用“MarkerShadow”类并使用它来制作一层阴影。并使用标记创建一个图层:proof of concept - 缺点:处理相同的KML两次。

我可以为您考虑4种选择:

  • 将阴影放在单独的KML文件中,并使用原生的google.maps.KmlLayer显示它们,它们应该将它们放在所有google.maps.Marker对象下面,这是geoxml3用来渲染图标的对象。 KmlLayer的问题在于它不支持缩放,所有图标都缩放到64x64,如果不能,则会被默认的蓝色图标替换。 KmlLayer在overlayLayer窗格中呈现。

  • 使用Custom Overlays创建自定义“标记”,支持将标记图像与阴影图像相结合。以前由Google Maps Javascript API v3本身支持,但他们使用“视觉刷新”删除了该功能。看起来"shadowPane"仍然存在(至少目前为止),你可以将所有阴影放在那里。

  

overlayShadow包含标记阴影。它可能不会收到DOM事件。 (窗格2)。

mapPanes reference

  • 使用zIndex对象的google.maps.Marker选项将阴影置于标记下方。将所有阴影置于zIndex = 0(因此它们位于底部,然后使用算法将标记置于其默认方向:

    zIndex: Math.round(latlng.lat()*-100000)<<5

  • “手动”为自定义“createMarker”功能中的标记添加阴影(将阴影图像附加到shadowPane)

proof of concept marker with shadow