Question

这里的Javascript相当新人。我试图让我的谷歌地图上的Google Fusion Table的总线停靠协调员工作，但我似乎可以修复它。试过我在stackoverflow上找到的几个解决方案。谁可以对此有所了解？

var map;
var busLine3;
var busLine3Id = "1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR";

function initialize() {

var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
    center: new google.maps.LatLng(59.327677777000000, 18.062950644241347),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

var busLine3 = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: "col2",
                from: busLine3Id,
            },
            options: {
                styleId: 2,
                templateId: 2
            }
        });



busLine3.setMap(map);

}

// Toggle the layer to hide/show

function changeLayer(tableidselections) {

if (tableidselections == busLine3Id){
     if (document.getElementById("show_hide_layer1").checked == true) {
       if(busLine3.getMap() == null) { busLine3.setMap(map); }
     }

     if (document.getElementById("show_hide_layer1").checked == false) {
         busLine3.setMap(null);  /*layersetoff*/
     }

}

我的index.html：

<head>
<style type="text/css">
    html, body, #googft-mapCanvas {
        height: 600px;
        margin: 0;
        padding: 0;
        width: 800px;
        }
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script>
<script type="text/javascript" src="mapScript.js"></script>
</head>

<body onload="initialize()";>
<h2>Enabled with Google Maps API (HTML and Javascript)</h2>
  <input type="checkbox" id="show_hide_layer1" onclick="changeLayer(this.value);" checked="checked">Bus Line 3</input>
  <input type="checkbox" id="show_hide_layer2" onclick="changeLayer(this.value);" checked="checked">Locations</input>

<div id="googft-mapCanvas"></div>
<br/>

Answer 1

你的问题就在这一行：

if (tableidselections == busLine3Id)

tableidselections“开启”; busLine3Id是“1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR”

一旦我解决了这个问题（将busLine3Id更改为“on”，我得到Uncaught TypeError: Cannot read property 'setMap' of undefined，因为busLine3是初始化函数的本地函数（在全局范围内声明它，var buseLin3，但是在initalize中声明它。

您的map变量存在同样的问题。

工作代码段：

var map;
var busLine3;
var busLine3Id = "1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR";

function initialize() {

  map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
    center: new google.maps.LatLng(59.327677777000000, 18.062950644241347),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  busLine3 = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: {
      enabled: false
    },
    query: {
      select: "col2",
      from: busLine3Id
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });



  busLine3.setMap(map);

}

// Toggle the layer to hide/show

function changeLayer(tableidselections) {

  if (tableidselections == "on") {
    if (document.getElementById("show_hide_layer1").checked == true) {
      if (busLine3.getMap() == null) {
        busLine3.setMap(map);
      }
    }

    if (document.getElementById("show_hide_layer1").checked == false) {
      busLine3.setMap(null); /*layersetoff*/
    }

  }
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js"></script>
<h2>Enabled with Google Maps API (HTML and Javascript)</h2>

<input type="checkbox" id="show_hide_layer1" onclick="changeLayer(this.value);" checked="checked">Bus Line 3</input>
<input type="checkbox" id="show_hide_layer2" onclick="changeLayer(this.value);" checked="checked">Locations</input>
<div id="googft-mapCanvas"></div>
<br/>

working fiddle

切换到使用不同的Google Fusion Tables

1 个答案: