Javascript 位置查找:Google Fusion表格显示带有多个管脚的地图
我有一个位置查找工具,可以从Google Fusion表中提取数据。用户输入他们的地址后,它会在与他们的位置匹配的位置/结果处放置一个pin和信息窗口。它在一个位置工作得很好,但现在我需要它显示多个结果/如果符合条件,则删除多个管脚 以下是丢失一个pin的工作代码抱歉,太多了:Javascript 位置查找:Google Fusion表格显示带有多个管脚的地图,javascript,google-maps,google-maps-markers,Javascript,Google Maps,Google Maps Markers,我有一个位置查找工具,可以从Google Fusion表中提取数据。用户输入他们的地址后,它会在与他们的位置匹配的位置/结果处放置一个pin和信息窗口。它在一个位置工作得很好,但现在我需要它显示多个结果/如果符合条件,则删除多个管脚 以下是丢失一个pin的工作代码抱歉,太多了: google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); var FusionTableID = 'table
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var FusionTableID = 'tableid';
var map = null;
var geocoder = null;
var infowindow = null;
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(41.9908, -93.4208),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
layer = new google.maps.FusionTablesLayer({
query: {from:FusionTableID},
styles: [{
polygonOptions: {
fillColor:'#000000',
fillOpacity: 0.01,
strokeColor:'#000000',
strokeOpacity: 0.01
}
}],
suppressInfoWindows:true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(e) {
var content = "<b>"+e.row['name'].value+"</b>";
infowindow.setContent(content);
infowindow.setPosition(locationgeocode);
infowindow.open(map);
});
document.getElementById('submit').onclick = function() {
document.getElementById("submit").value = "Searching";
};
}
function showAddress(address) {
var contentString = address+"<br>Outside Area";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
contentString += "<br>";
// query FT for data
var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";
// document.getElementById('FTQuery').innerHTML = queryText;
queryText = encodeURIComponent(queryText);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(openInfoWindowOnMarker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function openInfoWindowOnMarker(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
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();
var content = "<b>Outside of Iowa</b><!--";
var unionBounds = null;
// alert(numRows);
for (var i=0; i < numRows; i++) {
var county = FTresponse.getDataTable().getValue(i,0);
var precinct = FTresponse.getDataTable().getValue(i,1);
var locationname = FTresponse.getDataTable().getValue(i,2);
var locationaddress = FTresponse.getDataTable().getValue(i,3);
var locationcity = FTresponse.getDataTable().getValue(i,4);
var locationstate = FTresponse.getDataTable().getValue(i,5);
var locationzip = FTresponse.getDataTable().getValue(i,6);
var locationgeocode = FTresponse.getDataTable().getValue(i,7);
// var kml = FTresponse.getDataTable().getValue(i,1);
// create a geoXml3 parser for the click handlers
content = "<b>"+locationname+"</b><br />"+locationaddress+"<br />"+locationcity+locationstate+" "+locationzip+"<br/><a href='http://maps.google.com/maps?daddr="+locationaddress+" "+locationcity+" IA "+locationzip+"' target='_blank' >Click here for Directions</a><br /></br></p><!--";
/*
var geoXml = new geoXML3.parser({
map: map,
zoom: false
});
// alert(kml);
geoXml.parseKmlString("<Placemark>"+kml+"<\/Placemark>");
geoXml.docs[0].gpolygons[0].setMap(null);
if (!unionBounds) unionBounds = geoXml.docs[0].gpolygons[0].bounds;
else unionBounds.union(geoXml.docs[0].gpolygons[0].bounds);
*/
}
// zoom to the bounds
// map.fitBounds(unionBounds);
setTimeout(function() {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.setContent(content+marker.getPosition().toUrlValue(6));
google.maps.event.trigger(marker, 'click');
document.getElementById("submit").value = "Search";
}, 150);
geocoder.geocode( { 'address': locationaddress+","+locationcity+locationstate+" "+locationzip}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
map.setCenter(point);
map.setZoom(12);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
};
});
}
谢谢 这对我不管用tableid不是有效的id。我知道我必须去掉实际的id,因为它是一个数据表,我的客户还不想公开它。抱歉。也许您可以创建一个包含正确列的示例表,这样代码就可以在不公开专有信息的情况下工作。
var queryText2 ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01)); AND locationname = 'Location 2'";