0

単純なGoogleマップをdivに表示する方法がよくわかりません。私はバックボーンとマリオネットに慣れていないので、この質問はバックボーンのような mvc の経験がある人にとっては些細なことのように思えます

これまでのmaps.jsの私のコードは次のとおりです

define([
    'jquery',
    'underscore',
    'text!scripts/templates/map.html',
    'async!https://maps.googleapis.com/maps/api/js?v=3&sensor=true'
], function($, _, mapTemp) {

    var MapView = Marionette.ItemView.extend({


        template: _.template( mapTemp ),

        ui:  {
            mapContainer: '#map-container' 
        },

        onRender: function() {

            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };

            var map = new google.maps.Map(this.ui.mapContainer.el, mapOptions);

        }
    });

    return MapView;
});

私のテンプレートはとてもシンプルです:

 <div id="map-container"></div>

マップを div に表示したいだけで、簡単な質問ですが、バックボーンとマリオネットのバックグラウンド経験がないため、数時間の問題になりました。

4

2 に答える 2

0

https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_APIによると、API キーが必要です。https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE Google マップ API は、アプリが GPS または同様のセンサーを使用して位置を設定する場合に、key = Google マップ API キーとセンサー = true/false の形式を使用します。

を使用してhttps://maps.googleapis.com/maps/api/js?v=3&sensor=trueいます。APIキーがありません。

または、「Google Maps API for Business」を使用していた場合、Google マップ API はフォームを使用します。その API の詳細については、 https:http://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID&sensor=true_or_false&v=3.12
//developers.google.com/maps/documentation/business/clientside/#MapsJS を 参照してください。

コードは最初の方法を使用するhttps://developers.google.com/maps/documentation/javascript/tutorial#HelloWorldに似ているように見えるため、最初の方法を使用する必要があると思います。

Google マップの API キーを取得するには、https: //developers.google.com/maps/documentation/javascript/tutorial#api_key を参照してください。

于 2013-09-18T19:05:51.727 に答える
0

この場合、問題を解決するには、アイテムビューUIから正しいDOMセレクターを取得するだけでよいと思いますthis.ui.mapContainer.el。this.ui.mapContainer[0]Google マップの初期化子で。

var map = new google.maps.Map(this.ui.mapContainer[0], mapOptions)
于 2014-08-29T22:29:38.710 に答える