0

我刚开始使用骨干，实际上坚持显示谷歌地图的任务，这是代码

<!DOCTYPE html> 
<html> 
<head> 
    <title>wePadel!</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      #map_container {
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: #e2a1c6;
      }
    </style>
</head>
<body> 

    <a href="#map">Map</a>
    <div id="wrapper">
        <div id="map_container"></div>
        <ul id="matchlisting"></ul>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/backbone-min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


    <script src="routers/router.js" type="text/javascript"></script>
    <script src="models/match-model.js" type="text/javascript"></script>
    <script src="views/match-view.js" type="text/javascript"></script>
    <script src="views/map-view.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>
    <script src="helpers/helpers.js" type="text/javascript"></script>
</body>

路由器.js

app = {
    helpers: {},
    models : {},
    views  : {},
    routers: {},
    init: function(){
        mainView = new app.views.Matches();
        appRouter = new app.routers.Router();
        Backbone.history.start();
    }
}

app.routers.Router = Backbone.Router.extend({
    routes: {
        "":     "mainView",             //#main
        "map":      "mapView"
    },

    mainView: function(){
        new app.views.Matches();
    },

    mapView: function(){
        new app.views.Map();
    }
});

和地图视图

app = app || {};

app.views.Map = Backbone.View.extend({

    initialize: function(){
        self = this;
        self.configMap();
            self.render();
    },

    configMap: function(){
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      this.map = new google.maps.Map(document.getElementById('map_container'),
          mapOptions);
    },

    render: function(){
        return this;
    }

});

调试时我可以看到地图对象，但 map_container div 中没有显示任何内容，感谢您的帮助。

4

1 回答 1

0

我终于找到了问题所在，在深入搜索stackoverflow后我发现了这个问题。

基本上我不得不改变我对谷歌地图 API 的调用，并在调用结束时附加“&callback=gMapsCallback”，所以我在做什么：

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

即使我没有使用回调，我也必须这样做

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=gMapsCallback"></script>

现在地图正在显示。

希望这对其他人有帮助！谢谢你们。

于 2013-07-26T10:03:48.917 回答