Google Maps API V3 - 通过采用InfoBox标签Fusion Tables多边形 [英] Google Maps API V3 - Label Fusion Tables polygons by employing InfoBox
本文介绍了Google Maps API V3 - 通过采用InfoBox标签Fusion Tables多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试在Google Maps API V3中通过使用InfoBox来为Fusion Tables多边形贴标签，
用于此示例，我使用 http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html ，
但代码（如下所示）不显示标签：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN>
< html>
< head>
< title>通过采用InfoBox< / title>标签融合表格多边形
< style>
#map_canvas {width：610px; height：400px; }
.style1 {font-size：14px}
< / style>
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js><<< ; /脚本>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =http://www.google-analytics.com/urchin.js>< / script>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascriptsrc =http://www.google.com/fusiontables/gvizdata?tq=>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{'packages'：['corechart'，'table'，'geomap']}）;
var map;
var labels = [];
var layer;
var tableid = 1499916;
函数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）;
}
}
}）;
}
函数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;
}
}）;
函数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（'http://www.google.com/fusiontables/gvizdata?tq='+ queryText）;
//设置回调函数
query.send（displayZipText）;
}
var infowindow = new google.maps.InfoWindow（）;
函数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 =回应;
numRows = response.getDataTable（）。getNumberOfRows（）;
numCols = response.getDataTable（）。getNumberOfColumns（）; （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）））;
labels.push（new InfoBox（{
content：zipStr
，boxStyle：{
border：1px纯黑
，textAlign：中心
，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）;
}
}
< / script>
< body onload =initialize（）;>
< form>
< span class =style1>显示：< / span>
< input id =addresstype =textvalue =07646>< / input>
< input id =geocodetype =buttononclick =codeAddress（）;值= 地理编码 >< /输入>
< div id =map_canvas>< / div>
< / body>
< / html>
有人有任何建议吗？
最好的问候，
Darko
解决方案
我得到一个javascript错误google is undefined。
看起来您并未将Google Maps Javascript API v3包含在正确的位置（geoxml3和infobox需要它）。如果我确定我在多边形上看到了邮政编码标签。
< script type =text / javascriptsrc = http://maps.google.com/maps/api/js?sensor=false\"></script>
<！ - 加载AJAX API - >
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js><<< ; /脚本>
不知道这是什么：
< script type =text / javascriptsrc =http://www.google.com/fusiontables/gvizdata?tq=>< / script>
I'm trying inside Google Maps API V3 to Label Fusion Tables polygons by employing InfoBox, for this I use example from http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html, but code (as shown below) do not display labels:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Label Fusion Tables polygons by employing InfoBox</title>
<style>
#map_canvas { width: 610px; height: 400px; }
.style1 {font-size: 14px}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://www.google.com/fusiontables/gvizdata?tq="></script>
<script type="text/javascript">
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('http://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;
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)));
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);
}
}
</script>
<body onload="initialize();">
<form>
<span class="style1">Show:</span>
<input id="address" type="text" value="07646" ></input>
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode"></input>
<div id="map_canvas"></div>
</body>
</html>
Does anyone have any suggestions?
Best regards, Darko
解决方案
I get a javascript error "google is undefined".
Doesn't look like you are including the Google Maps Javascript API v3 in the right place (it is needed for geoxml3 and infobox). If I fix that I see zip code labels on the polygons.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
Not sure what this is for:
<script type="text/javascript" src="http://www.google.com/fusiontables/gvizdata?tq="></script>
这篇关于Google Maps API V3 - 通过采用InfoBox标签Fusion Tables多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
