0

私はバックボーンを使い始めたばかりで、実際にGoogleマップを表示するタスクにこだわっています。コードは次のとおりです

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

Routers.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();
    }
});

そしてmapView

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 を集中的に検索した後、私は最終的に問題がどこにあるのかを見つけました この質問を見つけました。

基本的に、Googleマップの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 に答える