Google maps 我不知道'；我看不出任何错误，但地图不会出现（使用github中的gmaps.js）_Google Maps_Google Maps Api 3

Google maps 我不知道'；我看不出任何错误，但地图不会出现（使用github中的gmaps.js）

google-maps google-maps-api-3

Google maps 我不知道'；我看不出任何错误，但地图不会出现（使用github中的gmaps.js）,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我正在尝试使用，但由于某些原因，它不起作用，我很确定我打出来的是正确的，如果有人能告诉我正确的方向，谢谢。（实际照片，以防上面不够大。）以下是新的源代码： <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://maps.google.com/maps/ap

我正在尝试使用，但由于某些原因，它不起作用，我很确定我打出来的是正确的，如果有人能告诉我正确的方向，谢谢。（实际照片，以防上面不够大。）

以下是新的源代码：

<!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>


/**
*基本地图
*/
$（文档）.ready（函数（）{
var map=新GMAP({
分区：“#基本地图”，
拉脱维亚：51.5073346，
液化天然气：-0.1276831，
缩放：12，
动物控制：对，
ZoomControl控件：{
风格：“小”，
位置：“左上方”
},
泛控制：错误，
});
});

我测试了代码。也许您应该设置div元素的宽度和高度。您可以使用Firebug检查地图是否已经创建

像这样改变你的div

正如我在评论中所说，您可能缺少div的宽度和高度，请尝试在中显示map

以下是JSFIDLE的工作原理：

为代码添加了宽度和高度。
或者您会得到相同的结果，宽度和高度在css中。差别不大。

（请原谅我的英语不好）

我通过查看“gmaps.js”-文件解决了这个问题

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;
    }

结论:

gmaps.js不在乎你是否使用了

div:'basic_-map'

或

el:'basic_-map'

->两者都可以正常工作

错误=

div:“#基本地图”

，正确=

div:“基本地图”

使用一些CSS指定

div

的宽度和高度

刷新并快乐起来。：）

在你的部门：

<div id="basic_map"></div>

或者将div id更改为“map”并创建样式：

 <style type="text/css">
    #map {
         width: 700px;
          height: 500px;
          border: 1px solid #a0a0a0;
    }
  </style>


#地图{
宽度：700px；
高度：500px；
边框：1px实心#A0；
}

在你的部门：

<div id="map" class="map"></div>

您使用了“el”，但我在示例中看到，他们使用了

div:“#map”

来显示应该出现在哪个div map中，而且您确定“#basic#u map”div足够大，可以显示任何内容吗？（css中的宽度和高度）遗憾的是，这并没有解决问题。地图已加载到您的页面中，但您缺少高度，这就是为什么即使已加载，您也看不到地图的原因。在Gmap选项内或通过CSS指定高度，问题将得到解决。凯多下面的回答指出了你问题的实际解决方案。我给你+1。问题是div的高度丢失了。地图已加载到页面上，但由于未定义高度，因此不可见。插件的行为有点不一致。。。但是是的，就在那里

 <style type="text/css">
    #map {
         width: 700px;
          height: 500px;
          border: 1px solid #a0a0a0;
    }
  </style>

<div id="map" class="map"></div>