更改Google地图图层的z顺序

时间:2015-07-23 08:04:17

标签: javascript google-maps-api-3 z-index google-fusion-tables

我在Google地图上有3个图层。第一个是一组多边形。第二个是一组标记。第三个是热图。

我正在使用以下脚本库

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=visualization"></script> 
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['intensitymap']}]}"></script>

我从Map对象开始。

var MAP = new google.maps.Map(document.getElementById('map-canvas'), 
{
    zoom : 5,
    center : new google.maps.LatLng(-25.610111, 134.354806),
    mapTypeId : google.maps.MapTypeId.ROADMAP
});

后跟多边形

var  polygons = new google.maps.FusionTablesLayer({
     query : {
       select : 'Polygons',
       from : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' 
     },
    map : MAP,
    suppressInfoWindows : true});

其次是标记,其中一个是

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-28.8, 152.5),
  map: MAP,
  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
  title: "Tabulam"});

接着是热图(缩写)

var heatmapLayer = new google.maps.visualization.HeatmapLayer();
var heatData = [
{location: new google.maps.LatLng(-30.3, 153.1), weight: 102}]
heatmapLayer.setData(heatData);
heatmapLayer.setOptions({opacity:1, radius:50});
heatmapLayer.setMap(MAP);

包含在函数中并使用

调用的所有内容
google.maps.event.addDomListener(window, 'load', initialize);

我遇到的问题是热像图在多边形后面被遮挡了。我该如何推进?或者,如何将多边形直接推到后面?

0 个答案:

没有答案