我正在尝试使用GMaps.js in github,但由于某种原因它无法正常工作,我很确定我已将其输入正确,如果有人能指出我正确的方向,谢谢。 (http://i.imgur.com/3LkL6xS.png实际照片,以防此处不够大。)
以下是新的源代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBi7e8AiTyqWiFt9vlbGqsAzGyRhVWqCsk&sensor=true"></script>
<script src="js/gmaps.js"></script>
<script>
/**
* Basic Map
*/
$(document).ready(function(){
var map = new GMaps({
div: '#basic_map',
lat: 51.5073346,
lng: -0.1276831,
zoom: 12,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
});
});
</script>
</head>
<body>
<div id="basic_map"></div>
</body>
</html>
答案 0 :(得分:14)
正如我在评论中所说,你可能错过了div的宽度和高度,你可以尝试显示地图。
这是工作jsfiddle:jsFiddle to play with
$(document).ready(function () {
var map = new GMaps({
div: '#basic_map',
lat: 51.5073346,
lng: -0.1276831,
width: '500px',
height: '500px',
zoom: 12,
zoomControl: true,
zoomControlOpt: {
style: 'SMALL',
position: 'TOP_LEFT'
},
panControl: false
});
});
为代码添加了宽度和高度 或者 Here 你有相同的结果,宽度和高度在css中。差别不大。
答案 1 :(得分:4)
(请原谅我可怜的英语)
我通过查看“gmaps.js”-file ...
解决了这个问题 gmaps.js(v4.5.0)使用getElementById
。
if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
this.el = getElementById(container_id, options.context);
} else {
this.el = container_id;
}
结论:
div: 'basic_map'
还是el: 'basic_map'
- &gt;两者都可以正常工作。div: '#basic_map'
,CORRECT = div: 'basic_map'
。div
的宽度和高度
醇>
刷新并开心。 :)
答案 2 :(得分:2)
我测试了代码。也许你应该设置宽度&amp; div元素的高度。 你可以用firebugs来检查地图是否已经创建
像这样改变你的div
<div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
答案 3 :(得分:0)
$(document).ready(function () {
var map = new GMaps({
div: '#basic_map',
lat: 51.5073346,
lng: -0.1276831,
width: '500px', --->You must add this
height: '500px',---->And this in your map declaration
zoom: 12,
zoomControl: true,
zoomControlOpt: {
style: 'SMALL',
position: 'TOP_LEFT'
},
panControl: false
});
});
在你的div中:
<div id="basic_map"></div>
或者将div id更改为“map”并创建样式:
<style type="text/css">
#map {
width: 700px;
height: 500px;
border: 1px solid #a0a0a0;
}
</style>
在你的div中:
<div id="map" class="map"></div>