This question already has an answer here:
Google maps request returning “Cannot set property 'position' of undefined”
(1个答案)
5年前关闭。
我正在使用bone.js作为我的框架。我的问题是,当我尝试将google map与ribs.js集成时遇到了这个奇怪的问题。
该教程来自此站点。
https://developers.google.com/maps/documentation/javascript/examples/event-closure
即使我已经尝试过这些解决方案,问题仍然存在。
Uncaught TypeError: Cannot set property 'position' of undefined
Google maps request returning "Cannot set property 'position' of undefined"
我的代码如下
js
html
谢谢。
至
Map()构造函数期望
更新:如果地图容器div元素的ID为
另请参见example at jsbin,不带骨干.js。
(1个答案)
5年前关闭。
我正在使用bone.js作为我的框架。我的问题是,当我尝试将google map与ribs.js集成时遇到了这个奇怪的问题。
Uncaught TypeError: Cannot set property 'position' of undefined
该教程来自此站点。
https://developers.google.com/maps/documentation/javascript/examples/event-closure
即使我已经尝试过这些解决方案,问题仍然存在。
Uncaught TypeError: Cannot set property 'position' of undefined
Google maps request returning "Cannot set property 'position' of undefined"
我的代码如下
js
define(['jquery', 'underscore', 'backbone', 'text!modules/map/mapListViewTemplate.html'], function($, _, Backbone, mapListViewTemplate) {
var MapListView = Backbone.View.extend({
initialize: function() {},
render: function() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map($('#map-canvas'), mapOptions);
// Add 5 markers to the map at random locations
var southWest = new google.maps.LatLng(-31.203405, 125.244141);
var northEast = new google.maps.LatLng(-25.363882, 131.044922);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var position = new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setTitle((i + 1).toString());
this.attachSecretMessage(marker, i);
}
this.$el.html(mapListViewTemplate);
},
attachSecretMessage: function(marker,num) {
var message = ['This', 'is', 'the', 'secret', 'message'];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
},
remove: function() {
Backbone.View.prototype.remove.call(this);
$(window).off('scroll');
}
});
return MapListView;
});
html
<div id="map-canvas"></div>
谢谢。
最佳答案
你必须换线
var map = new google.maps.Map($('#map-canvas'), mapOptions);
至
var map = new google.maps.Map($('#map-canvas')[0], mapOptions);
Map()构造函数期望
Node
对象。另请参见jQuery get DOM node?和How to get a DOM Element from a JQuery Selector更新:如果地图容器div元素的ID为
maplist-page
而不是使用:var map = new google.maps.Map($('#maplist-page')[0], mapOptions);
另请参见example at jsbin,不带骨干.js。