[英]Why am I getting Cannot read property 'getCenter' of undefined when trying to access my embed google map?
This is how I construct the google map on my page: 这就是我在页面上构造Google地图的方式:
var initialize = function(latitude, longitude, boundaries) {
// Uses the selected lat, long as starting point
var myLatLng = {lat: selectedLat, lng: selectedLong};
// If map has not been created...
if (!map){
// Create a new map and place in the index.html page
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatLng
});
}
if(boundaries.length > 0){
//we don't have a permission for using real GPS of the user
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(boundaries[0], boundaries[1]),
new google.maps.LatLng(boundaries[2], boundaries[3]) );
map.fitBounds(bounds);
}else{
//we have a permission, let's mark his location with a marker
// Set initial location as a bouncing red marker
var initialLocation = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: initialLocation,
animation: google.maps.Animation.BOUNCE,
map: map,
icon: 'http://www.google.com/mapfiles/dd-start.png'//'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
//lastMarker = marker;
}
refreshDataOnMap(longitude, latitude, map);
and as you can see I try to pass the created map to the refreshDataOnMap
method: 如您所见,我尝试将创建的地图传递给
refreshDataOnMap
方法:
var refreshDataOnMap = function(long, lat, mymap) {
console.log("refresh!!");
var calculatedDistance = calculateRadiusInMiles(mymap);
}
and this method calls calculateRadiusInMiles
: 并且此方法调用
calculateRadiusInMiles
:
// get the viewable map radius
var calculateRadiusInMiles = function(map){
var bounds = map.getBounds();
var center = bounds.getCenter();
var ne = bounds.getNorthEast();
// r = radius of the earth in statute miles
var r = 3963.0;
// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
var lat1 = center.lat() / 57.2958;
var lon1 = center.lng() / 57.2958;
var lat2 = ne.lat() / 57.2958;
var lon2 = ne.lng() / 57.2958;
// distance = circle radius from center to Northeast corner of bounds
var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) +
Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
return dis;
};
The result in my console says: 我的控制台中的结果显示:
refresh!!
刷新!
angular.js:12520 TypeError: Cannot read property 'getCenter' of undefined at calculateRadiusInMiles (gservice.js:112) at refreshDataOnMap (gservice.js:48) at initialize (gservice.js:214) at Object.googleMapService.refresh (gservice.js:36) at Object.
angular.js:12520 TypeError:无法在Object.googleMapService.refresh(gservice)的initialize(gservice.js:214)的refreshDataOnMap(gservice.js:48)的calculateRadiusInMiles(gservice.js:112)处读取未定义的属性'getCenter' .js:36)。 (gservice.js:225) at Object.invoke (angular.js:4523) at Object.enforcedReturnValue [as $get] (angular.js:4375) at Object.invoke (angular.js:4523) at angular.js:4340 at getService (angular.js:4482)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292Scope.$apply @ angular.js:16157bootstrapApply @ angular.js:1679invoke @ angular.js:4523doBootstrap @ angular.js:1677bootstrap @ angular.js:1697angularInit @ angular.js:1591(anonymous function) @ angular.js:29013fire @ jquery.js:3182self.fireWith @ jquery.js:3312jQuery.extend.ready @ jquery.js:3531completed @ jquery.js:3547
(gservice.js:225),位于Object.invoke(angular.js:4523),位于Object.enforcedReturnValue [as $ get](angular.js:4375),位于Object.invoke(angular.js:4523),位于angular.js: 4340 at getService(angular.js:4482)(匿名函数)@ angular.js:12520(匿名函数)@ angular.js:9292Scope。$ apply @ angular.js:16157bootstrapApply @ angular.js:1679invoke @ angular.js: 4523doBootstrap @ angular.js:1677bootstrap @ angular.js:1697angularInit @ angular.js:1591(匿名函数)@ angular.js:29013fire @ jquery.js:3182self.fireWith @ jquery.js:3312jQuery.extend.ready @ jquery。 js:3531完成@ jquery.js:3547
refresh!!
刷新!
and therefore I cannot use the map on my page properly. 因此我无法正确使用页面上的地图。 I don't know what might be wrong here, for me it looks like the map loads after I try to call its properties, but - if that's correct - how can I prevent it?
我不知道这里可能出了什么问题,对我来说,在尝试调用地图的属性后,它看起来就像是加载了地图,但是-如果正确的话-我该如何避免呢?
Thanks 谢谢
EDIT=========== 编辑===========
one detail here since it might be useful to debug this problem: 这里有一个细节,因为调试该问题可能有用:
I load the google map and center it based on user ip address, but then when the browser detects the gps data then the map reloads and point to the specific gps point. 我加载谷歌地图,并根据用户IP地址将其居中,但是当浏览器检测到GPS数据时,地图将重新加载并指向特定的GPS点。 That's why in my console.log you can see the
refresh!!!
这就是为什么在我的console.log中可以看到
refresh!!!
twice 两次
It must be that bounds
is undefined, so map
is not (yet) valid. bounds
必须是未定义的,因此map
尚未生效。 Have you checked map
when it's passed to calculateRadiusInMiles()
? 您是否在将
map
传递给calculateRadiusInMiles()
时检查过它? Have you checked bounds
? 你检查
bounds
吗? Has the map already loaded? 地图已经加载了吗?
Google Maps Api v3 - getBounds is undefined Google Maps Api v3-getBounds未定义
Edit to spoon-feed: 编辑以汤匙进料:
It looks like there's an event in v3 for exactly this: 看来v3中确实有一个事件是这样的:
`google.maps.event.addListener(map, 'bounds_changed', function() {
alert(map.getBounds());
});
or 要么
`google.maps.event.addListener(map, 'idle', function() {
alert(map.getBounds());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.