Google Maps Javascript API v3 地图标签和多边形 [英] Google Maps Javascript API v3 Map Label and Polygons

问题描述

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

解决方案

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

您是否正在尝试做这样的事情:

代码片段:

google.load('visualization', '1', {'packages': ['corechart', 'table', 'geomap']});无功地图；var 标签 = [];var层；var tableid = 1499916;函数初始化(){地理编码器 = 新的 google.maps.Geocoder();map = new google.maps.Map(document.getElementById('map_canvas'), {中心:新的 google.maps.LatLng(37.23032838760389, -118.65234375),变焦:6，mapTypeId: google.maps.MapTypeId.ROADMAP});layer = new google.maps.FusionTablesLayer(tableid);layer.setQuery("SELECT 'geometry' FROM " + tableid);layer.setMap(地图);代码地址()；google.maps.event.addListener(地图，bounds_changed"，函数(){displayZips();});google.maps.event.addListener(地图，zoom_changed"，函数(){如果 (map.getZoom() <11) {for (var i = 0; i 

#map_canvas {宽度:610px；高度:400px；}

<script type="text/javascript" src="https://www.google.com/jsapi"></脚本><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">显示</span>:</span><input id="address" type="text" value="07646"></input><input id="geocode" type="button" onclick="codeAddress();"值=地理编码"/><div id="map_canvas"></div>

I am using the Google Maps javascript API v3 with a project, and I am currently having troubles getting the maplabels to appear above the polygons. I know that the polygons are z-indexed with respect to only themselves (Not able to use the z-index of a maplabel to place the maplabel above it). I was wondering if there was some hack to get around this issue. I am also using the info Window library for the api, and I need the labels to appear above the polygons, but below the info window.

解决方案

NOTE: Fusion Tables was shut down on December 3, 2019, Google Maps Javascript API version 3.37 is the last version that supported Fusion Tables

Are you trying to do something like this:

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

Uses infoBox for map labels which appear on top of the FusionTablesLayer Polygon.

With a white background on the label:

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

code snippet:

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>

这篇关于Google Maps Javascript API v3 地图标签和多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！