Question

在Ruby on Rails应用程序中使用骨干，我在application.html.erb中调用API加载器：

<head>
 <title>TrailBlazer</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl2bJ7tGHzHEz_7o4nNl_rXKitL4xpMEQ&sensor=false"></script>
  <%= javascript_include_tag "application" %>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>

然后是我的地图模型：

var Map = Backbone.Model.extend({
  defaults: {
  zoom: 5
 },

initialize: function(){
    console.log("map model loaded");
    this.center = new google.maps.LatLng(40.612732, -75.912438);
    this.mapTypeId = google.maps.MapTypeId.TERRAIN;
//plots coordinates for Polyline
    this.shelterCoordinates = [
      new google.maps.LatLng(34.62673, -84.193656),
      new google.maps.LatLng(34.7398, -83.9369),
      new google.maps.LatLng(35.035482, -83.537977),
      new google.maps.LatLng(35.55, -83.5) 
    ];
  }
});

最后我的地图视图：

var MapView = Backbone.View.extend({
  id: 'map',

  initialize: function(options){
    console.log("map view loaded");
    this.player = options.player;
    this.icon =   'http://www.marcellusgas.org/images/gmap/beachflag.png';
    this.map =    new google.maps.Map(this.el, this.model.attributes);


    this.path = new google.maps.Polyline({
      path: this.model.shelterCoordinates,
      geodesic: true,
      strokeColor: '#9900CC',
      strokeOpacity: 0.5,
      strokeWeight: 2
    });

    this.path.setMap(this.map);

    // set up listeners to changing model
    this.listenTo(this.player, 'change:shelter', this.render);
    this.listenTo(this.player, 'change:over', this.remove);

    this.render();
  },

  render: function(){
    var lat = this.player.get("shelter").get("lat");
    var lng = this.player.get("shelter").get("long");
    console.log(this.myLatLng = new google.maps.LatLng(lat, lng))
    this.marker = new google.maps.Marker({
      position: this.myLatLng,
      map:      this.map,
      icon:     this.icon
    });
    $('#map').replaceWith( $(this.el));
    $("body").append( $(this.el));
    google.maps.event.trigger(this.map, 'resize');
  }

});

我没有出现错误，DOM元素似乎就位，模型和视图加载时出现灰色框。

Answer 1

以下是代码中的一个问题点：

模型的attributes属性是包含zoom属性的哈希值（因为它被声明为默认属性）但是否 center或{ {1}}属性。模型属性应使用模型的set方法 - 而不是 mapTypeId进行设置，就像您在模型的this.attr = value方法中所做的那样。

Google Map v3无法使用骨干进行渲染

1 个答案: