Google Maps Javascript API v3地图标签和多边形 [英] Google Maps Javascript API v3 Map Label and Polygons
本文介绍了Google Maps Javascript API v3地图标签和多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将Google Maps JavaScript API v3与一个项目一起使用，而且我目前遇到麻烦让maplabels出现在多边形上方。我知道多边形只针对自己进行z索引（不能使用maplabel的z索引将maplabel放在它的上面）。我想知道是否有一些黑客来解决这个问题。我也使用api的信息窗口库，并且我需要标签出现在多边形上方，但是在信息窗口下方。
解决方案
您是否想要做这样的事情：
代码片段：
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（地图）; 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不成功，原因如下：+ status）;}}）;} function displayZips（）{//设置查询使用当前边界var queryStr =选择几何，ZIP，纬度，经度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）; //设置回调函数query.send（displayZipText）;} var infowindow = new google.maps.InfoWindow（）;函数displayZipText（response）{if（！response）{alert（'no response'）;返回; }（response.isError（））{alert（'Error in query：'+ response.getMessage（）+''+ response.getDetailedMessage（））;返回; } if（map.getZoom（）< 11）return; FTresponse =回应; //有关响应对象的更多信息，请参阅文档//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse numRows = response.getDataTable（）。getNumberOfRows（）; numCols = response.getDataTable（）。getNumberOfColumns（）; for（i = 0; i
#map_canvas {width：610px; height：400px;}
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>< script type =text / javascriptsrc =https://maps.google.com/maps/ api / js>< / script>< script type =text / javascriptsrc =https://cdn.rawgit.com/googlemaps/v3-utility-library/07f15d84/infobox/src/infobox。 js>< / script>< script type =text / javascriptsrc = https：//cdn.rawgit.com/geocodezip/geoxml3/f43a77ca/polys/geoxml3.js>< / script> < span class =style51>< span class =style49>显示< / span>：< / span>< input id =addresstype =textvalue =07646> ;< / input>< input id =geocodetype =buttononclick =codeAddress（）;value =Geocode/>< 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.
解决方案
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"></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屋！
查看全文
