位置查询:Google Fusion Table显示多个引脚的地图

时间:2014-09-19 16:34:36

标签: javascript google-maps google-maps-markers

我有一个位置查找工具,可以从Google Fusion表中提取数据。用户输入他们的地址,然后在匹配其位置的地点/结果处放置一个图钉和信息窗口。 它适用于一个位置,但现在我需要它来显示多个结果/如果它们符合标准则丢弃多个引脚

这里是丢弃一个引脚的工作代码(对不起它很多):

 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
      });
    };
  });
}

如果多个查询匹配var queryText ="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));";

,我基本上需要删除多个引脚

任何想法,修复,甚至是正确方向上的一点都会非常有帮助。我真的坚持这个并且已经尝试了几天了。即使是让它打印第二个查询,我可以在表格中标记为第二个位置也会有所帮助。像第二个匹配的东西:

  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'";

谢谢!

0 个答案:

没有答案