0

图标显示，但选择下拉菜单不起作用...

选择菜单应该进行查询，并且结果地图应该使用标记图标进行样式设置。

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

1 回答 1

0

我得到这个 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

您的 map、layer 和 changeMap 函数是 initialize 函数的本地函数。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>

工作示例

于 2013-07-30T23:59:23.550 回答