javascript - Google Maps JavascriptAPIv3マップラベルとポリゴン

Question

プロジェクトでGoogleMapsjavascript API v3を使用していますが、現在、ポリゴンの上にマップラベルを表示するのに問題があります。ポリゴンはそれ自体に関してのみz-indexされていることを知っています（maplabelのz-indexを使用してmaplabelをその上に配置することはできません）。この問題を回避するためのハックがあるかどうか疑問に思いました。APIに情報ウィンドウライブラリも使用しています。ポリゴンの上、ただし情報ウィンドウの下にラベルを表示する必要があります。

Answer 1

注：FusionTablesは2019年12月3日にシャットダウンされました。GoogleMapsJavascriptAPIバージョン3.37は、FusionTablesをサポートした最後のバージョンです。

あなたはこのようなことをしようとしていますか？

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

FusionTablesLayerポリゴンの上に表示されるマップラベルにinfoBoxを使用します。

ラベルの背景が白の場合：

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

これはおそらく遅い発見です..しかし、誰かがこれが役に立つと思うことを願っています。

infoBoxラベルの代わりに（geocodezipのソリューション）を使用せず、カスタムzIndexを指定する場合..maplabel.jsを編集します。

MapLabel.prototype.onAdd = function（）{の終わりの直前に次の行を追加します

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

これで、マップラベルの作成中にzIndexを渡すことができます。

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