Question

我对以下代码有疑问：为什么谷歌地图不显示？

该脚本先前工作，直到我插入了告诉地图绘制关于所选点的圆的部分。我使用了示例代码here中的代码。我不确定它是否已被正确修改。我想在这里做的是使用选定的点并围绕它创建一个圆形缓冲区。距离可由最终用户指定，此距离内的多边形将显示。

数据是私有的，因此无法共享。 TableID1是点图层，TableID2是多边形图层。

非常感谢任何帮助。

以下是代码：

<!DOCTYPE html>


<html>

<head>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Wells</title>

<style>
        #map-canvas { width:800px; height:600px; }
      </style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    function initialize() {
        var tableId = '';
        var tableId2 = '';       
        var locationColumn = 'geometry';
        var locationColumn2 = 'geometry';

        var map = new google.maps.Map(document.getElementById('map-canvas'), 
        {
          center: new google.maps.LatLng(43.85012691109855, -79.75539434814452),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn,
            from: tableId,
            where: 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
             },

        map: map
        });

        var layer2 = new google.maps.FusionTablesLayer({

        query: {
            select: locationColumn2,
            from: tableId2
          },
          map: map
        });

google.maps.event.addDomListener(document.getElementById('wellid'),

'change', 
function() {
        updateMap(layer, tableId, locationColumn);
        });

      }

// Update the query sent to the Fusion Table Layer based on  
// the user selection in the select menu

function updateMap(layer, tableId, locationColumn) {
        var wellid = document.getElementById('wellid').value;
        if (wellid) {
          layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId,
              where: "description CONTAINS '" + wellid + "'"
            }
          });
        } 

else {
        layer.setOptions({
            query: {
              select: locationColumn,
              from: tableId
            }
          });
        }
      }



// Create a map circle object to visually show the radius.

        var circle = new google.maps.Circle({
          center: new google.maps.LatLng(wellid),
          radius: 5000,
          map: map,
          fillOpacity: 0.2,
          strokeOpacity: 0.5,
          strokeWeight: 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'),
            'change', function() {
              var meters = parseInt(this.value, 10);
              layer.setOptions({
                query: {
                  select: 'description',
                  from: tableid,
                  where: 'ST_INTERSECTS(Address, ' +
                      'CIRCLE(wellid), ' + meters + '))'
                }
              });
              circle.setRadius(meters);
            });

google.maps.event.addDomListener(window, 'load', initialize);

    </script>


</head>


<body>

<div id="map-canvas"></div>

<label>Well ID:</label>


<select id="wellid">


<option value="">--Select--</option>


<option value="Well ID: 9">9</option>


<option value="Well ID: 129">129</option>


<option value="Well ID: 130">130</option>


<option value="Well ID: 131">131</option>


<option value="Well ID: 384">384</option>


<option value="Well ID: 469">469</option>


<option value="Well ID: 470">470</option>


<option value="Well ID: 494">494</option>


<option value="Well ID: 495">495</option>


<option value="Well ID: 697">697</option>


<option value="Well ID: 698">698</option>


<option value="Well ID: 735">735</option>


<option value="Well ID: 737">737</option>


</select>


</body>


</html>

Answer 1

好的，我修复了你的代码：

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>Wells</title>

    <style>
      #map-canvas {
        width: 800px;
        height: 600px;
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      var map, wellid;
      function initialize() {
        var tableId = '';
        var tableId2 = '';
        var locationColumn = 'geometry';
        var locationColumn2 = 'geometry';

        map = new google.maps.Map(document.getElementById('map-canvas'), {
          center : new google.maps.LatLng(43.85012691109855, -79.75539434814452),
          zoom : 10,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({

          query : {
            select : locationColumn,
            from : tableId,
            where : 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
          },

          map : map
        });

        var layer2 = new google.maps.FusionTablesLayer({

          query : {
            select : locationColumn2,
            from : tableId2
          },
          map : map
        });

        google.maps.event.addDomListener(document.getElementById('wellid'), 'change', function() {
          updateMap(layer, tableId, locationColumn);
        });

      }

      // Update the query sent to the Fusion Table Layer based on
      // the user selection in the select menu

      function updateMap(layer, tableId, locationColumn) {
        wellid = document.getElementById('wellid').value;
        if (wellid) {
          layer.setOptions({
            query : {
              select : locationColumn,
              from : tableId,
              where : "description CONTAINS '" + wellid + "'"
            }
          });
        } else {
          layer.setOptions({
            query : {
              select : locationColumn,
              from : tableId
            }
          });
        }
      }

      google.maps.event.addDomListener(window, 'load', function() {
        // Create a map circle object to visually show the radius.
        var circle = new google.maps.Circle({
          center : new google.maps.LatLng(wellid),
          radius : 5000,
          map : map,
          fillOpacity : 0.2,
          strokeOpacity : 0.5,
          strokeWeight : 1
        });

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'), 'change', function() {
          var meters = parseInt(this.value, 10);
          layer.setOptions({
            query : {
              select : 'description',
              from : tableid,
              where : 'ST_INTERSECTS(Address, ' + 'CIRCLE(wellid), ' + meters + '))'
            }
          });
          circle.setRadius(meters);
        });
      });

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

    <div id="map-canvas"></div>

    <label>Radius:</label>
    <input type="number" id="radius" value="1">
    <label>Well ID:</label>

    <select id="wellid">
      <option value="">--Select--</option>
      <option value="Well ID: 9">9</option>
      <option value="Well ID: 129">129</option>
      <option value="Well ID: 130">130</option>
      <option value="Well ID: 131">131</option>
      <option value="Well ID: 384">384</option>
      <option value="Well ID: 469">469</option>
      <option value="Well ID: 470">470</option>
      <option value="Well ID: 494">494</option>
      <option value="Well ID: 495">495</option>
      <option value="Well ID: 697">697</option>
      <option value="Well ID: 698">698</option>
      <option value="Well ID: 735">735</option>
      <option value="Well ID: 737">737</option>
    </select>
  </body>
</html>

Javascript：谷歌地图没有显示

1 个答案: