gpt4 book ai didi

javascript - Google Visualization 的 ZoomLevel 参数不起作用

转载 作者:行者123 更新时间:2023-12-03 11:10:52 25 4
gpt4 key购买 nike

我正在使用单个图钉创建 map 类型的 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

最佳答案

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

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

作为解决方法,根据该问题,第二次绘制 map 似乎可行:

working fiddle

将此添加到示例中(仅延迟半秒然后重新绘制 map ):

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 中发布的未记录解决方法(正如他所说的“风险自负”)。

存在时间问题;您必须延迟缩放设置,直到 map 完成渲染。

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>

关于javascript - Google Visualization 的 ZoomLevel 参数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27605081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com