0

我真的不知道如何在 div 中显示简单的谷歌地图。我是骨干和木偶的新手，所以这个问题对于任何有像骨干这样的 mvcs 经验的人来说似乎都是微不足道的

到目前为止，这是我在 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

我想在这种情况下要解决您的问题，您可以从项目视图 ui 中获取正确的 DOM 选择器，而不是通过，this.ui.mapContainer.el而是例如。this.ui.mapContainer[0]在谷歌地图初始化程序中。

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

根据https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API您需要一个 API 密钥。google map api 使用https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE key = your google maps api key and sensor = true/false 的形式，如果应用程序使用 GPS 或类似传感器来设置位置。

您正在使用https://maps.googleapis.com/maps/api/js?v=3&sensor=true. 没有 api 密钥。

或者，如果您使用的是“Google Maps API for Business”，则 Google 地图 api 使用表单http://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID&sensor=true_or_false&v=3.12
请参阅https://developers.google.com/maps/documentation/business/clientside/#MapsJS以获取有关该 api 的更多信息。

我怀疑您应该使用第一种方法，因为您的代码似乎类似于使用第一种方法的https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld 。

要获取 google maps api 密钥，请参阅https://developers.google.com/maps/documentation/javascript/tutorial#api_key。

于 2013-09-18T19:05:51.727 回答