显示谷歌地图 API 的骨干/木偶问题

Backbone/Marionette trouble with displaying google maps api

本文关键字：问题 谷歌地图 API 显示      更新时间：2023-09-26

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

这是到目前为止我在地图中的代码.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 中，简单的问题，但没有骨干和木偶的背景经验，它已经成为一个多小时的问题。

根据 https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API，你需要一个API密钥。谷歌地图 API 使用表单https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE其中键 = 您的谷歌地图 API 键和传感器 = 真/假是应用是否使用 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
有关该 API 的更多信息，请参阅 https://developers.google.com/maps/documentation/business/clientside/#MapsJS。

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

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

我想在这种情况下

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

var map = new google.maps.Map(this.ui.mapContainer[0], mapOptions)
相关文章：