沒有查詢

的圖標谷歌Fusion Tables的下拉菜單中出現，但在選擇下拉菜單是不工作...沒有查詢

的選擇菜單是應該做的查詢和生成的地圖被認爲帶有標記的圖標來稱呼。

<!DOCTYPE html> 
<html>  
<head> 
<style> 
#visualization { 
height: 660px; 
width: 900px; 
} 
#legend { 
background: lightsteelblue; 
padding: 10px; 
margin: 5px; 
font-size: 10px; 
font-family: Arial, sans-serif; 
border: 1px black; 
} 
</style> 
<link href="/apis/fusiontables/docs/samples/style/defult.css" 
rel="stylesheet"type="text/css"> 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 


function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(33.56,-112), 
    zoom: 10, 
    zoomControl: true, 
    zoomControlOptions: { 
     position:google.maps.ControlPosition.RIGHT_TOP 
    }, 
    panControl: true, 
    panControlOptions: { 
     position:google.maps.ControlPosition.RIGHT_TOP 
    }, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    var layer = new google.maps.FusionTablesLayer({ 
    query: { 
     select: "col7", 
     from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc" 
    }, 
    styles: [ 
     {where: "'Type'='Boarding'",markerOptions: {iconName: "stable"}}, 
     {where: "'Type'='Grooming'",markerOptions: {iconName: "salon"}}, 
    {where: "'Type'='Hospitals'",markerOptions: {iconName: "hospitals"}}, 
     {where: "'Type'='Shelters'",markerOptions: {iconName: "museum"}}, 
     {where: "'Type'='Stores'",markerOptions: {iconName: "shopping"}}, 
     ], 
    map:map, 
    }); 


function changeMap() { 
    var whereClause; 
var searchString = 
    document.getElementById('search-string').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') 
    {whereClause = "'Type' = '" + searchString + "'";} 
    layer.setOptions({ 
    query: 
    {select: "col7", 
     from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc", 
     where: whereClause} 
    }); 
} 
// Create the legend and display on the map 
    var legend = document.createElement('div'); 
    legend.id = 'legend'; 
    var content = []; 
    content.push('<h3>Icons:</h3>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/boarding1.png" 
    width="24"height="25">Boarding</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/grooming1.png" 
    width="24"height="25">Grooming</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/hospitals1.png" 
    width="24"height="25">Hospitals</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shelters1.png" 
    width="24"height="25">Shelters</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shopping1.png" 
    width="24"height="25">Stores</p>'); 

    legend.innerHTML = content.join(''); 
    legend.index = 1; 
    map.controls[google.maps.ControlPosition.LEFT_CENTER].push(legend); 
    } 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div> 
    <label class="layer-wizard-search-label"> 
    <b><label>SERVICES:</label></b> 
    <select id="search-string" onchange="changeMap(this.value);"> 
     <option value="--Select--">--Select--</option> 
     <option value="Boarding">Boarding</option> 
     <option value="Grooming">Grooming</option> 
     <option value="Hospitals">Hospitals</option> 
     <option value="Stores">Stores</option> 
     <option value="Shelters">Shelters</option> 
    </select> 
    </label> 
    </div> 
    <div id="map-canvas" style="background-color:#EEEEEE;height:660px; 
    width:80%;float:left;"> 
    Content goes here 

    </div> 
    </body> 

    </html>

來源

2013-07-30 user2632639

什麼，在哪裏是錯誤？你能提供更多的信息嗎？ – tbraun89

地圖與圖例和下拉菜單一起顯示，但下拉菜單不起作用。 – user2632639

http://www.public.asu.edu/~ajusic1/EX3.html – user2632639

我得到這個JavaScript錯誤：

Timestamp: 07/30/2013 04:54:33 PM 
Error: changeMap is not defined 
Source File: http://www.public.asu.edu/~ajusic1/EX3.html 
Line: 1

你的地圖，層和changeMap功能是本地的初始化函數。 HTML點擊和更改事件在全局上下文中運行。

這個地方對我的作品：

<!DOCTYPE html> 
<html>  
<head> 
<style> 
#visualization { 
height: 660px; 
width: 900px; 
} 
#legend { 
background: lightsteelblue; 
padding: 10px; 
margin: 5px; 
font-size: 10px; 
font-family: Arial, sans-serif; 
border: 1px black; 
} 
</style> 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map = null; 
var layer = null; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    center: new google.maps.LatLng(33.56,-112), 
    zoom: 10, 
    zoomControl: true, 
    zoomControlOptions: { 
     position:google.maps.ControlPosition.RIGHT_TOP 
    }, 
    panControl: true, 
    panControlOptions: { 
     position:google.maps.ControlPosition.RIGHT_TOP 
    }, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    layer = new google.maps.FusionTablesLayer({ 
    query: { 
     select: "col7", 
     from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc" 
    }, 
    styles: [ 
     {where: "'Type'='Boarding'",markerOptions: {iconName: "stable"}}, 
     {where: "'Type'='Grooming'",markerOptions: {iconName: "salon"}}, 
    {where: "'Type'='Hospitals'",markerOptions: {iconName: "hospitals"}}, 
     {where: "'Type'='Shelters'",markerOptions: {iconName: "museum"}}, 
     {where: "'Type'='Stores'",markerOptions: {iconName: "shopping"}}, 
     ], 
    map:map, 
    }); 


// Create the legend and display on the map 
    var legend = document.createElement('div'); 
    legend.id = 'legend'; 
    var content = []; 
    content.push('<h3>Icons:</h3>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/boarding1.png" width="24" height="25">Boarding</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/grooming1.png" width="24" height="25">Grooming</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/hospitals1.png" width="24" height="25">Hospitals</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shelters1.png" width="24" height="25">Shelters</p>'); 
    content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shopping1.png" width="24" height="25">Stores</p>'); 

    legend.innerHTML = content.join(''); 
    legend.index = 1; 
    map.controls[google.maps.ControlPosition.LEFT_CENTER].push(legend); 
    } 
function changeMap() { 
    var whereClause; 
var searchString = 
    document.getElementById('search-string').value.replace(/'/g, "\\'"); 
    if (searchString != '--Select--') 
    {whereClause = "'Type' = '" + searchString + "'";} 
    layer.setOptions({ 
    query: 
    {select: "col7", 
     from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc", 
     where: whereClause} 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div> 
    <label class="layer-wizard-search-label"> 
    <b><label>SERVICES:</label></b> 
    <select id="search-string" onchange="changeMap(this.value);"> 
     <option value="--Select--">--Select--</option> 
     <option value="Boarding">Boarding</option> 
     <option value="Grooming">Grooming</option> 
     <option value="Hospitals">Hospitals</option> 
     <option value="Stores">Stores</option> 
     <option value="Shelters">Shelters</option> 
    </select> 
    </label> 
    </div> 
    <div id="map-canvas" style="background-color:#EEEEEE;height:660px; 
    width:600px;"> 
    Content goes here 

    </div> 
    </body> 

    </html>

working example

來源

2013-07-30 23:59:23 geocodezip

現在，它的工作原理！非常感謝！ – user2632639

我認爲這可能是該函數設置方式的問題。再次感謝你！ – user2632639

回答

相關問題