【发布时间】：2014-01-07 07:07:30
【问题描述】：
我刚刚开始使用 javascript 和骨干进行编程。我正在尝试在 Backbone 的模板上显示搜索框、谷歌地图和搜索结果（对街道地址进行地理编码）。我在这里使用谷歌文档，https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
我无法让地图在模板中呈现，我也没有在开发者工具控制台中看到任何错误消息。我认为这与初始化函数有关。我已经尝试了这方面的 100 种潜在配置。任何指导都会有所帮助。
这是索引文件：
<!DOCTYPE html>
<html>
<head>
<title>DateNite</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript" src="js/lib/underscore.js"></script>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/backbone.js"></script>
<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=THISISWHEREMYKEYWOULDGO&sensor=false"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/oauth.js"></script>
<script type="text/javascript" src="http://oauth.googlecode.com/svn/code/javascript/sha1.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<div class="dn-container">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DateNite</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
<div class="well">
<!-- Nav tabs -->
<ul class="nav nav-pills inverse">
<li class="active"><a href="#current" data-toggle="tab">Home</a></li>
<li><a href="#map" data-toggle="tab">Map</a></li>
<li><a href="#twitter" data-toggle="tab">Tweet</a></li>
</ul>
</br>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="current">a</div>
<div class="tab-pane fade" id="map">Google</div>
<div class="tab-pane fade" id="twitter">Tweet</div>
</div>
</div>
</div>
</body>
</html>
这是我的模板：
<div id="panel">
<input id="address" type="text" class="form-control col-lg-8" value="Portland, OR">
<input type="button" value="Geocode" class="geocode btn btn-success">
</div>
<div id="map-canvas"></div>
这是我的 CSS：
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
这是我的看法：
var MapView = Backbone.View.extend({
el: '#map', // every Backbone view has an associated DOM element
template: require('../../templates/map.hbs'),
initialize: function () {
this.listenTo(this.model, 'change', this.render);
this.render();
},
render: function () {
google.maps.event.addDomListener(window, 'onload', this.initialize);
var context = {}
context.businesses = this.model.get('businesses') || {};
this.$el.html(this.template(context));
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(45.5200, 122.6819);
var mapOptions = {
zoom: 12,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
return this;
},
events: {
"click .geocode": "codeAddress",
},
codeAddress: function() {
console.log("Button Clicked");
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Search was not successful for the following reason: ' + status);
}
});
},
});
module.exports = MapView;
【问题讨论】：
-
您将视图附加到
#map元素，但我在您的 html 代码中找不到它？ -
你好 Akaryarthrh 它在底部，Google
标签： javascript google-maps backbone.js google-maps-api-3