Question

我一直在为一对夫妇做这个，所以达到这一点应该让我很开心。但是，我无法弄清楚我的infowindow输出是否为每个新行添加“\ n”。不知道它是如何到达那里的。地理位置也被附加到搜索结果infowindow。我也想删除它。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sheriff | Zone Leader Look Up</title>

    <meta name="author" content="Santa Clarita Valley Sheriff" />
    <meta name="copyright" content="Copyright 2013 SCV Sheriff" />
    <meta name="keywords" content="Santa Clarita Valley Sheriff, SCV Sheriff, Canyon Country, Valencia, Saugus, Newhall, Castaic, Gorman, Stevenson Ranch, " />
    <meta name="description" content="Santa Clarita Valley Sheriff Zone Leader Contact Inforamtion Look Up." />
    <meta name="robots" content="index,follow" />
    <meta name="Googlebot" content="follow" />
    <meta name="googlebot" content="archive" />
    <meta name="distribution" content="global" />

<!--Load the AJAX API-->
 <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
//<![CDATA[
  google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

    //var FusionTableID = 1931355;
    var FusionTableID = '1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk';
    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: 10,
    center: new google.maps.LatLng(34.452789398370045, -118.51948001245114),
    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(FusionTableID,{suppressInfoWindows:true});
  layer = new google.maps.FusionTablesLayer({
      map: map,
      suppressInfoWindows: true,
      heatmap: { enabled: false },
      query: {
        select: "col2",
        from: "1uSGM1yPMJBlu74Znm4fPqdCsJjteB_kQ_nGz3tk",
        where: "",
      },
      options: {
        styleId: 2,
        templateId: 2
      }
    });
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", function(e) {
    var content = e.row['description'].value+"<br><br>";
    infowindow.setContent(content);
    infowindow.setPosition(e.latLng);
    infowindow.open(map);
    });

}
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>"+point;
          map.setCenter(point);
          if (marker && marker.setMap) marker.setMap(null);
          marker = new google.maps.Marker({
              map: map, 
              position: point
          });
          // query FT for data
          var queryText ="SELECT 'description', 'Zone Area'  FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'Zone Area\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.5));";
          // 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 area</b><br><br>";    
  var unionBounds = null;
//  alert(numRows);
  for (var i=0; i < numRows; i++) {
     var name = FTresponse.getDataTable().getValue(i,0);
     var kml =  FTresponse.getDataTable().getValue(i,1);
     content = response.getDataTable().getValue(i,0)+"<br><br>";
   }
  infowindow.setContent(content+marker.getPosition().toUrlValue(6));
  // zoom to the bounds
  // map.fitBounds(unionBounds);
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
  google.maps.event.trigger(marker, 'click');
}


    </script>
</head>
<body onload="initialize()">
            <div id="content">
                <h1>SCV Sheriff Reporting Zones</h1>
                <p>Use the map below to determine your area's Zone Leader. Enter your street address, city and zip code in the search field below to view the Zone Leader's contact info.</p>

                <form action="#" onsubmit="showAddress(this.address.value); return false" style="padding:10px 0px 30px 0px; background:none;">                      
                    <label>Address Search</label>
                    <input type="text" size="60" name="address" value="23920 Valencia Blvd. Santa Clarita, CA 91355" class="address" />
                    <input type="submit" value="Search" />
                    </p>
                    <div id="map_canvas" style="width: 516px; height: 387px; margin-bottom:30px; border:1px solid #999;"></div>                    
                </form>

            </div>
            <div id="sidebar">
            </div>
            <div class="clear"><!--clear--></div>
        </div>
</body>
</html>

Answer 1

问题在于FusionTable中的数据（换行符被翻译成“\ n”）。我修复了my example中“Gorman”的条目（通过删除无关的换行符）。

我的代码这一行将地理位置附加到搜索结果infowindow：

infowindow.setContent(content+marker.getPosition().toUrlValue(6));

Fusion infowindow输出添加“\ n”和地理位置

1 个答案: