Question

这是我第一次使用Javascript，我拼凑了代码以在网站上显示我的Google Fusion Table。
该网站有移动版本，但在移动设备上不会显示地图（它在网络版上完美运行）。
我使用了一项名为 Weebly 的服务来创建网站，并为您生成移动版本，我想我不知道这是否与此问题有关。

任何人都可以帮我改变代码，让地图在移动设备上运行吗？

我在这里很丢失。我知道有IsMobile线路，但我不知道如何正确改变它们。

以下是代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>ProjectsR5(Revised) - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
}
}
#panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

</style>

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

<script type="text/javascript">
function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      map.setZoom(11);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
var geocoder;
var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    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=yes');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    mapDiv.style.width = isMobile ? '40%' : '950px';
    mapDiv.style.height = isMobile ? '40%' : '600px';
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(37.57633626219805, -119.83481312667385),
      zoom: 7,
      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'));

    layer = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: {
        select: "col5",
        from: "1KbXpf6FSzsFQt3rIpVP5ruIR_Pij87dgy2HwjyLi",
        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(window, 'load', initialize);

</script>
</head>

 <body>
    <div id="panel">
      <input id="address" type="textbox" value="Your Project Location">
      <input type="button" value="Search" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>

<body>
  <div id="googft-mapCanvas"></div>
</body>
</html>

Answer 1

<body/>需要通过CSS设置高度，否则浏览器无法计算此行中地图高度的40％：

mapDiv.style.height = isMobile ? '40%' : '600px';

在网站的移动版本上不显示融合表格地图

1 个答案: