Question

我正在创建一个带有单个图钉的Google地图可视化类型。

根据How to set zoomLevel in google Visualization Map api?，我应该可以使用zoomLevel选项来控制初始缩放级别。但是，对我来说，这失败了（代码）：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [12, 77, 'Random location nearby'],
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {showTip: true, zoomLevel: 10, mapType: "normal"});
      }

    </script>
  </head>

  <body>
    <h1>Drop Point Map</h1> <hr />
    <div id="map_div" style="width: 99%; height: 85%"></div>
  </body>
</html>

如您所见，zoomLevel: 10已设置，但我在缩放级别上没有运气，默认为最大缩放级别（19）

关于我缺少什么的任何想法？

来自Visualization: Map - Google Charts — Google Developers

的来源

fiddle demonstrating issue

Answer 1

看起来它没有按照记录的方式工作。可能相关issue in the issue tracker。

确认为将在下一滴中修复的错误：https://code.google.com/p/google-visualization-api-issues/issues/detail?id=747

作为一种解决方法，根据该问题，第二次绘制地图似乎有效：

working fiddle

将此添加到示例中（只是延迟半秒然后重绘地图）：

setTimeout(function () {
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
}, 500);

google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        [12, 77, 'Random location nearby'], ]);

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
    setTimeout(function () {
        map.draw(data, {
            showTip: true,
            zoomLevel: 10,
            mapType: "normal"
        });
    }, 500);
}

html, body, #map_div {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Drop Point Map</h1> 
<hr />
<div id="map_div" style="width: 99%; height: 85%"></div>

您还可以使用未记录的解决Dr.Molle在the question to which you refer中发布的问题（因为他指示“，风险自负”）。

有一个时间问题;你必须延迟缩放设置，直到地图完成渲染。

google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    google.visualization.Map.prototype.getMap = function () {
        for (var k in this) {
            if (this[k].constructor == google.maps.Map) return this[k];
        }
    }
    var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        [12, 77, 'Random location nearby']
    ]);

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
    setTimeout(function () {
        console.log(map.getMap().getZoom() + ":" + map.getMap().getCenter());
        map.getMap().setZoom(12);
    }, 500);
}

proof of concept fiddle

代码段：

google.load("visualization", "1", {
  packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  google.visualization.Map.prototype.getMap = function() {
    for (var k in this) {
      if (this[k].constructor == google.maps.Map) return this[k];
    }
  }
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [12, 77, 'Random location nearby']
  ]);

  var map = new google.visualization.Map(document.getElementById('map_div'));
  map.draw(data, {
    showTip: true,
    zoomLevel: 10,
    mapType: "normal"
  });
  google.maps.event.addListenerOnce(map.getMap(), 'idle', function() {
    console.log(map.getMap().getZoom() + ":" + map.getMap().getCenter());
    map.getMap().setZoom(12);
  });
}

html,
body,
#map_div {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Drop Point Map</h1> 
<hr />
<div id="map_div" style="width: 99%; height: 85%"></div>

Google Visualization的zoomLevel参数无法正常工作

1 个答案: