Google Maps Javascript API v3 地图标签和多边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12714031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps Javascript API v3 Map Label and Polygons
提问by Mike
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.
我在一个项目中使用了 Google Maps javascript API v3，但我目前在让地图标签出现在多边形上方时遇到了麻烦。我知道多边形仅相对于它们自身进行 z 索引（无法使用地图标签的 z 索引将地图标签放置在其上方）。我想知道是否有一些技巧可以解决这个问题。我也在使用 api 的信息窗口库，我需要标签出现在多边形上方，但在信息窗口下方。
回答by geocodezip
Are you trying to do something like this:
您是否正在尝试做这样的事情：
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html
Uses infoBox for map labels which appear on top of the FusionTablesLayer Polygon.
对出现在 FusionTablesLayer 多边形顶部的地图标签使用 infoBox。
With a white background on the label:
标签上有白色背景：
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html
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"></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>回答by user1481172
回答by Avishek
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.
如果您不想使用infoBox(geocodezip's Solution) 而不是标签，并且想提供自定义 zIndex .. 编辑maplabel.js。
Add the following line just before the end of MapLabel.prototype.onAdd = function() {
在MapLabel.prototype.onAdd = function() {结束前添加以下行
if (canvas.parentNode != null) {
canvas.parentNode.style.zIndex = style.zIndex;
}
Now you can pass zIndexwhile creating a maplabel:
现在您可以在创建地图标签时传递zIndex：
var mapLabel = new MapLabel({
text: "abc",
position: center,
map: map,
fontSize: 8,
align: 'left',
zIndex: 15
});
回答by Lok Ming Chu
This works:
这有效：
In maplabel.js change:
在 maplabel.js 中更改：
mapPane.appendChild(canvas);
To
到
overlayLayer.appendChild(canvas);
