个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试运行下面的代码，但收到多种方法错误，我不确定如何解决。此类错误的一个示例是 Object # has no method 'getBounds' 。我已通过 API key 注册，但未将其包含在下面的代码中。
代码
<!doctype html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
div {
margin-top: 500px;
}
</style>
</head>
<div id="map"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>
<script type="text/javascript"charset="utf-8">
google.load("maps","2.x");
google.load("jquery","1.5.2");
</script>
<script type="text/javascript">
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
var burnsvilleMN = new GLatLng(44.797916,-93.278046);
map.setCenter(burnsvilleMN, 8);
});
// setup 10 random points
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i = 0; i<10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}
$.each(markers, function(i, marker){
// var marker = marker
setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
});
$('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
function displayPoint(marker, index){
var x = marker.getLatLng();
$('#map-info').hide();
var moveEnd = GEvent.addListener(map, 'moveend', function(){
var markerOffset = map.fromLatLngToDivPixel(x);
GEvent.removeListener(moveEnd);
});
map.panTo(marker.getLatLng());
}
</script>
</html>
更新代码
<!doctype html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
div {
margin-top: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"src="http://www.google.com/jsapi?key={API_KEY}&sensor=false"></script>
<script type="text/javascript"charset="utf-8">
google.load("maps","2.x");
google.load("jquery","1.5.2");
</script>
<script type="text/javascript">
$(document).ready(function(){
var map = new GMap2(document.getElementById('map'));
var burnsvilleMN = new GLatLng(44.797916,-93.278046);
map.setCenter(burnsvilleMN, 8);
// setup 10 random points
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i = 0; i<10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}
$.each(markers, function(i, marker){
// var marker = marker
setInterval(function(){displayPoint(marker, i);}, 5000 + (i * 5000));
});
$('#map-info').appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
function displayPoint(marker, index){
var x = marker.getLatLng();
$('#map-info').hide();
var moveEnd = GEvent.addListener(map, 'moveend', function(){
var markerOffset = map.fromLatLngToDivPixel(x);
GEvent.removeListener(moveEnd);
});
map.panTo(marker.getLatLng());
}
});
</script>
</body>
</html>
最佳答案
您的 $(document).ready() 函数在 DOM 准备就绪时运行。然而，其他代码会在遇到时运行——在 DOM 准备好之前。
这意味着浏览器会在 map 设置之前尝试执行 map.getBounds()。
解决方案是一起执行所有 map 操作。
<小时/>另请注意，必须为 map 指定明确的大小。你需要这样的东西:
div#map {
height: 500px;
width:500px;
}
并为每个 div 指定margin-top 会将该边距应用于每个 map 图 block ，从而对 map 产生不利影响。这需要去:
div { // applies to every div element
margin-top: 500px;
}
关于javascript - 谷歌地图javascript多种方法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11977592/
25
4
0
leaflet：一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档： https://leafletjs.cn/reference.html 官网（英文）： ht
我是一名优秀的程序员,十分优秀！