5

我正在尝试在 github 中使用 GMaps.js，但由于某种原因它无法正常工作，我很确定我输入正确，如果有人能指出我正确的方向，谢谢。（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>
4

4 回答 4

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

在代码中添加了宽度和高度。
或者在这里你有相同的结果，宽度和高度在 css 中。差别不大。

于 2013-03-03T08:49:07.243 回答
4

（请原谅我糟糕的英语）

我通过查看“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;
    }

结论：

  1. gmaps.js 不在乎您是否正在使用div: 'basic_map'或el: 'basic_map'-> 两者都可以正常工作。
  2. 错误 = div: '#basic_map'，正确 = div: 'basic_map'。
  3. div用一些 CSS指定宽度和高度

刷新和快乐。:)

于 2013-09-14T08:27:19.240 回答
2

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

像这样改变你的div <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

于 2013-03-03T08:33:22.823 回答
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>
于 2016-04-14T16:26:08.673 回答