Google MAPs API/Javascript /搜索框功能

-1

我試圖通過調用Google Maps API來嵌入搜索框功能，該API從Google fusion表中繪製數據。搜索框應搜索地圖上標記的名稱。但是當我在框中輸入任何字符時，搜索失敗。我不知道爲什麼。Google MAPs API/Javascript /搜索框功能

<!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>

搜索

來源

2016-10-09 user2271424

你是什麼意思的「搜索失敗」？當我運行你的代碼時，它不會失敗，它可以工作，但所有的標記都會變成紅色。 – geocodezip

您的search ST錯字環。 FusionTables中的列名區分大小寫。「NAME」應爲「名」：

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

應該是：

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

proof of concept fiddle

代碼片段：

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

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>

來源

2016-10-10 01:17:00 geocodezip

Google MAPs API/Javascript /搜索框功能

回答

相關問題