Question

我正在尝试通过调用谷歌地图api来嵌入搜索框功能，谷歌地图api从谷歌融合表中提取数据。搜索框应在地图上搜索标记的名称。但是当我在框中输入任何字符时，搜索失败。我不知道为什么。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"></meta>
    <title>Merge of Vino_Brew_BBQ and Markers - Google Fusion Tables</title>
    <style type="text/css">
        html, body, #googft-mapCanvas {
            height: 300px;
            margin: 0;
            padding: 0;
            width: 500px;
        }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAI_3RMI43f45RgHC9MLdZbePINAqH_ZM0"></script>


    <script type="text/javascript">

    var map;
    var VinoBrewBBQLayer;
    var VinoBrewBBQTable = '15qpgfFdsMTpuwQ_gR2-LgBSlN6Z7EPhCegikJ0xy';
    var VinoBrewBBQColumn = 'Geometry';


    function initialize() {
        google.maps.visualRefresh = true;
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
                (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }
        var mapDiv = document.getElementById('googft-mapCanvas');
        mapDiv.style.width = isMobile ? '100%' : '500px';
        mapDiv.style.height = isMobile ? '100%' : '300px';
        map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(31.340072697821267, -98.913833984375),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

        VinoBrewBBQLayer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: VinoBrewBBQColumn,
                from: VinoBrewBBQTable,
                where: ""
            },
            options: {
                styleId: 2,
                templateId: 2
            }
        });

        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
            legendCloseButton.style.display = 'block';
            legendOpenButton.onclick = function() {
                legend.style.display = 'block';
                legendOpenButton.style.display = 'none';
            }
            legendCloseButton.onclick = function() {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
            }
        }
    }

    function SearchLayer(VinoBrewBBQLayer, VinoBrewBBQTable, map){
        var store = document.getElementById('StoreTextInput').value;
        var search = "NAME CONTAINS IGNORING CASE '" + store + "'";

            if(!VinoBrewBBQLayer.getMap()){
                VinoBrewBBQLayer.setMap(map);
                alert (search);
            }
            VinoBrewBBQLayer.setOptions({
                query:  {
                    select: VinoBrewBBQColumn,
                    from: VinoBrewBBQTable,
                    where: search
                },
                options: {
                    styleId: 3,
                    templateId: 3
                }
            });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

搜索

Answer 1

您的var search = "NAME CONTAINS IGNORING CASE '" + store + "'";字符串中有拼写错误。 FusionTables中的列名称区分大小写。 “NAME”应为“姓名”：

var search = "Name CONTAINS IGNORING CASE '" + store + "'";

应该是：

var map;
var VinoBrewBBQLayer;
var VinoBrewBBQTable = '15qpgfFdsMTpuwQ_gR2-LgBSlN6Z7EPhCegikJ0xy';
var VinoBrewBBQColumn = 'Geometry';


function initialize() {
  google.maps.visualRefresh = true;
  var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
    (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
  }
  var mapDiv = document.getElementById('googft-mapCanvas');
  mapDiv.style.width = isMobile ? '100%' : '500px';
  mapDiv.style.height = isMobile ? '100%' : '300px';
  map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(31.340072697821267, -98.913833984375),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

  VinoBrewBBQLayer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: VinoBrewBBQColumn,
      from: VinoBrewBBQTable,
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });

  if (isMobile) {
    var legend = document.getElementById('googft-legend');
    var legendOpenButton = document.getElementById('googft-legend-open');
    var legendCloseButton = document.getElementById('googft-legend-close');
    legend.style.display = 'none';
    legendOpenButton.style.display = 'block';
    legendCloseButton.style.display = 'block';
    legendOpenButton.onclick = function() {
      legend.style.display = 'block';
      legendOpenButton.style.display = 'none';
    }
    legendCloseButton.onclick = function() {
      legend.style.display = 'none';
      legendOpenButton.style.display = 'block';
    }
  }
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function(evt) {
    SearchLayer(VinoBrewBBQLayer, VinoBrewBBQTable, map);
  })
}

function SearchLayer(VinoBrewBBQLayer, VinoBrewBBQTable, map) {
  var store = document.getElementById('StoreTextInput').value;
  var search = "Name CONTAINS IGNORING CASE '" + store + "'";

  if (!VinoBrewBBQLayer.getMap()) {
    VinoBrewBBQLayer.setMap(map);
    alert(search);
  }
  console.log("select:" + VinoBrewBBQColumn + "\nfrom:" + VinoBrewBBQTable + "\nwhere:" + search);
  VinoBrewBBQLayer.setOptions({
    query: {
      select: VinoBrewBBQColumn,
      from: VinoBrewBBQTable,
      where: search
    },
    options: {
      styleId: 3,
      templateId: 3
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

proof of concept fiddle

代码段

html,
body,
#googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="StoreTextInput" value="City Market" />
<input id="btn" value="search" type="button" />
<div id="googft-mapCanvas"></div>
<div id="googft-legend-open"></div>

 __weak id weakSelf = self;
 [other doSomething: ^{
     __strong id strongSelf = weakSelf;
     ....
 }];

Google MAPs API / Javascript /搜索框功能

1 个答案: