通过骨干返回在div标签谷歌地图JavaScript，但不显示 [英] Google map being returned in div tags via backbone javascript but not displaying

问题描述

我已经开始与地理位置玩弄，我可以得到的坐标等。我想在一个地图，以显示这一点，但是当我在地图返回到div没有被显示出来。现在，我看着在DIV，并正在返回的地图，只是没有分享范围。这是div的问题

注意这似乎只是一个微小的地图链接

 ＆LT;风格=的位置是：静态的;溢出-X：可见;溢出-Y：可见;浮动：无;显示：内联;目标=_空白的href = http://maps.google.com/maps?ll=51.263519,-7.124185&z=21&t=m&hl=en-US称号=点击查看关于这方面的谷歌地图＆GT;＆LT; D​​IV的风格=宽度：62px;高度：24px的;光标：指针;＆GT;＆LT; IMG风格=的位置是：绝对的;左：0像素;顶：0像素; -webkit-用户选择：无;边框顶部宽度：0像素;右边框宽度：0像素，下边框宽度：0像素，左边框宽度：0像素，边框样式family：宋体;边框颜色family：宋体;填充顶：0像素，填充右：0像素;填充底：0像素;填充左：0像素;的margin-top：0像素;保证金右：0像素;保证金底：0像素;保证金左：0像素;宽度：62px;高度：宋体;SRC =http://maps.gstatic.com/mapfiles/google_white.png拖动=假＆GT;＆LT; / DIV＆GT;＆LT; / A＆GT;
 

这是我在做什么，HTML
      
    
    家
    
    

您的位置

    

 ＆LT; D​​IV数据角色=内容ID =LOCATION1＆GT;
＆LT; D​​IV ID =地图的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
 

我的模型如下

  bb.model.Map = Backbone.Model.extend（{
  默认值：{
    中心：新google.maps.LatLng（51.26351898，-6.14462727）
    变焦：20，
    mapTypeId设为：google.maps.MapTypeId.ROADMAP
  }
}）;
 

我的看法如下：

  bb.view.Location = Backbone.View.extend（_。扩展（{   ID：地图，
   初始化：功能（）{
     this.map =新google.maps.Map（this.el，this.model.attributes）;
 this.render（）;
   }，
 渲染：功能（）{
 // $（'＃图）replaceWith（this.el）。
   $（'＃图）replaceWith（this.el）。
      $（'＃位置页）页面（）;   }，
 

}））

我还使用下面的脚本。

 ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://maps.google.com/maps/api/js?sensor=false＆GT;＆LT; /脚本＆GT;
 

解决方案

您有各种各样的问题在这里，所以我们会去上下。

当你这样说：

 ＆LT; D​​IV数据角色=内容ID =LOCATION1＆GT;
    ＆LT; D​​IV ID =地图的风格=宽度：100％;身高：100％＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

100％的宽度和高度值在 #map 指父元素，所以你是说

  

请 #map 尺寸相同＃LOCATION1

默认情况下，＆LT; D​​IV＆GT; ，像所有的块元素，将是一样宽，它的父（假设没有利润，填充，...在的方式），是高到足以容纳它的内容。如果你没有任何CSS的力量＃LOCATION1 是一个特定的大小，然后将它作为宽的页面（或者它有什么父母），并且将有零高度。这意味着， #map 也将是零像素高。所以，你需要确保＃LOCATION1 有一个分配的高度。

当您在一个视图定义这样说：

  ID：地图，
 

你只告诉骨干设置 ID =地图上的 ＆LT; D​​IV＆GT; 它为您的看法：

  

报 view.el

  
  

[...] this.el 从创建视图的标签名，的className ， ID 和属性属性，如果指定。如果不是，报是一个空的 DIV 。

话说 ID：地图不抢 #map 从DOM作为视图的使用报，它只是给你留下＆LT; D​​IV ID =地图＆GT;＆LT; / DIV＆GT; 为您的视图报。你可能想指定报视图定义：

 报：#map
 

您似乎在尝试使用纠正视图的报混乱的 replaceWith 。这应该工作，或多或少，但你仍然可以在地图绑定到零高度＆LT; D​​IV＆GT; 然后把零高度 ＆LT; D​​IV＆GT; 到DOM。短是好的，但你不能看到的东西是0像素高。

此外，你不需要 Backbone.View.extend（_扩展（{...}））; ，只需要 Backbone.View.extend（{...}）;

假设你有东西给＃LOCATION1 的高度，那么像这样的观点：

  Backbone.View.extend（{
    EL：#map'，
    初始化：功能（）{
        this.map =新google.maps.Map（
            this.el，
            this.model.toJSON（）
        ）;
        this.render（）;
    }，
    渲染：功能（）{
        返回此; //这是标准做法。
    }
}）;
 

应该得到的东西感动。

演示： http://jsfiddle.net/ambiguous/ue4zL/1/

I have started playing around with Geolocation, and I can get the co-ordinates etc. I want to show this in a map, but when I return the map to the div nothing gets displayed. Now I looked in the div, and the map is being returned but just not visibile. This is the div in question

Notice this seems to be just a link to a tiny map

  <a style="position: static; overflow-x: visible; overflow-y: visible; float: none;                 display:     inline; " target="_blank" href="http://maps.google.com/maps?ll=51.263519,-7.124185&amp;z=21&amp;t=m&amp;hl=en-US" title="Click to see this area on Google Maps"><div style="width: 62px; height: 24px; cursor: pointer; "><img style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 62px; height: 24px; " src="http://maps.gstatic.com/mapfiles/google_white.png" draggable="false"></div></a>

This is what I'm doing,Html Home

Your location

<div data-role="content" id="location1">
<div  id="map" style="width:100%; height:100%"></div>

My model is as follows

      bb.model.Map = Backbone.Model.extend({
  defaults: {
    center: new google.maps.LatLng(51.26351898,-6.14462727),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
});

My view is as follows

     bb.view.Location = Backbone.View.extend(_.extend({  

   id: 'map',
   initialize: function(){
     this.map = new google.maps.Map(this.el, this.model.attributes);
 this.render();
   },
 render: function(){
 //    $('#map').replaceWith(this.el);
   $('#map').replaceWith(this.el);
      $('#location-page').page();

   },

}))

I'm also using the following script.

      <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>   

解决方案

You have various problems here so we'll go top to bottom.

When you say this:

<div data-role="content" id="location1">
    <div  id="map" style="width:100%; height:100%"></div>
</div>

The 100% width and height values on #map refer to the parent element so you're saying

make #map the same size as #location1

By default, a <div>, like all block elements, will be as wide as its parent (assuming that there's no margins, padding, ... in the way) and be tall enough to contain its content. If you don't have any CSS that forces #location1 to be a specific size then it will be as wide as the page (or whatever parent it has) and it will have a height of zero. That means that #map will also be zero pixels tall. So you'll need to make sure #location1 has an assigned height.

When you say this in a view definition:

id: 'map',

you're only telling Backbone to set id="map" on the <div> it creates for your view:

el view.el

[...] this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

Saying id: 'map' doesn't grab #map from the DOM to use as the view's el, it just leaves you with <div id="map"></div> as your view's el. You probably want to specify el in the view definition:

el: '#map'

You seem to be trying to correct the view's el confusion using replaceWith. That should work, more or less, but you'd still be binding the map to a zero height <div> and then putting that zero height <div> into the DOM. Short is fine but you can't see something that is 0px tall.

Also, you don't need Backbone.View.extend(_.extend({ ... }));, you only need Backbone.View.extend({ ... });.

Assuming that you have something to give #location1 a height, then a view like this:

Backbone.View.extend({
    el: '#map',
    initialize: function() {
        this.map = new google.maps.Map(
            this.el,
            this.model.toJSON()
        );
        this.render();
    },
    render: function() {
        return this; // This is standard practice.
    }
});

should get things moving.

Demo: http://jsfiddle.net/ambiguous/ue4zL/1/

这篇关于通过骨干返回在div标签谷歌地图JavaScript，但不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！