javascript - Google Maps Javascript API v3 地图标签和多边形

Question

我在一个项目中使用 Google Maps javascript API v3，我目前无法让地图标签出现在多边形上方。我知道多边形仅相对于它们自身进行 z 索引（无法使用地图标签的 z 索引将地图标签放在其上方）。我想知道是否有一些技巧可以解决这个问题。我还在为 api 使用信息窗口库，我需要标签出现在多边形上方，但在信息窗口下方。

Answer 1

注意：Fusion Tables 已于 2019 年 12 月 3 日关闭，Google Maps Javascript API 版本 3.37 是支持 Fusion Tables 的最后一个版本

你是否试图做这样的事情：

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html

将 infoBox 用于显示在 FusionTablesLayer 多边形顶部的地图标签。

标签上有白色背景：

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html

代码片段：

google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
var map;
var labels = [];
var layer;
var tableid = 1499916;

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.23032838760389, -118.65234375),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'geometry' FROM " + tableid);
  layer.setMap(map);

  codeAddress();

  google.maps.event.addListener(map, "bounds_changed", function() {
    displayZips();
  });
  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() < 11) {
      for (var i = 0; i < labels.length; i++) {
        labels[i].setMap(null);
      }
    }
  });
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      if (results[0].geometry.viewport)
        map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function displayZips() {
  //set the query using the current bounds
  var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM " + tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG" + map.getBounds().getSouthWest() + ",LATLNG" + map.getBounds().getNorthEast() + "))";
  var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

  //set the callback function
  query.send(displayZipText);

}


var infowindow = new google.maps.InfoWindow();

function displayZipText(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  if (map.getZoom() < 11) return;
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  for (i = 0; i < numRows; i++) {
    var zip = response.getDataTable().getValue(i, 1);
    var zipStr = zip.toString()
    while (zipStr.length < 5) {
      zipStr = '0' + zipStr;
    }
    var point = new google.maps.LatLng(
      parseFloat(response.getDataTable().getValue(i, 2)),
      parseFloat(response.getDataTable().getValue(i, 3)));
    // bounds.extend(point);
    labels.push(new InfoBox({
      content: zipStr,
      boxStyle: {
        border: "1px solid black",
        textAlign: "center",
        backgroundColor: "white",
        fontSize: "8pt",
        width: "50px"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(-25, 0),
      position: point,
      closeBoxURL: "",
      isHidden: false,
      enableEventPropagation: true
    }));
    labels[labels.length - 1].open(map);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {
  width: 610px;
  height: 400px;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/07f15d84/infobox/src/infobox.js"></script>
<script type="text/javascript" src=https://cdn.rawgit.com/geocodezip/geoxml3/f43a77ca/polys/geoxml3.js"></script>
<span class="style51"><span class="style49">Show</span>:</span>
<input id="address" type="text" value="07646"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode" />
<div id="map_canvas"></div>

Answer 2

maplabel.js变化中：

mapPane.appendChild(canvas);

至

overlayLayer.appendChild(canvas);

此处描述了 mapPanes 。

然后在 mapLabelOptions 中设置 xIndex 以将标签放在多边形前面。

Answer 3

This is probably a late find.. but hope someone would find this useful.

If you don't want to use infoBox (geocodezip's Solution) instead of a label, and want to give a custom zIndex.. Edit the maplabel.js.

Add the following line just before the end of MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) {
    canvas.parentNode.style.zIndex = style.zIndex;
}

Now you can pass zIndex while creating a maplabel:

var mapLabel = new MapLabel({
    text: "abc",
    position: center,
    map: map,
    fontSize: 8,
    align: 'left',
    zIndex: 15
});

Answer 4

这有效：

在 maplabel.js 中更改：

mapPane.appendChild(canvas);

至

overlayLayer.appendChild(canvas);