Javascript 移动谷歌地图中心javascript api
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12699300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move google map center javascript api
提问by taormania
In my project I want to move the center of the map to new coordinates. This is the code I have for the map
在我的项目中，我想将地图的中心移动到新坐标。这是我的地图代码
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function moveToLocation(lat, lng){
var center = new google.maps.LatLng(lat, lng);
var map = document.getElementById("map_canvas");
map.panTo(center);
}
The moveToLocation function does get called but the map does not re center. Any idea what I'm missing?
moveToLocation 函数确实被调用，但地图不会重新居中。知道我错过了什么吗？
回答by Ethan Brown
Your problem is that in moveToLocation, you're using document.getElementByIdto try to get the Mapobject, but that only gets you an HTMLDivElement, not the google.maps.Mapelement you're expecting. So your variable maphas no panTofunction, which is why it doesn't work. What you need to is squirrel the mapvariable away somewhere, and it should work as planned. You can just use a global variable like so:
您的问题是在 中moveToLocation，您正在document.getElementById尝试获取Map对象，但这只会让您获得HTMLDivElement，而不是google.maps.Map您期望的元素。所以你的变量map没有panTo功能，这就是它不起作用的原因。您需要将map变量放在某个地方，它应该按计划工作。您可以像这样使用全局变量：
window.map = undefined; // global variable
function initialize() {
const mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// assigning to global variable:
window.map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
}
function moveToLocation(lat, lng){
const center = new google.maps.LatLng(lat, lng);
// using global variable:
window.map.panTo(center);
}
See working jsFiddle here: http://jsfiddle.net/fqt7L/1/
在此处查看工作 jsFiddle：http: //jsfiddle.net/fqt7L/1/
回答by sureshchann
Display the Google Maps API using dynamically, fetch the data in database to display the place, lat, long and to show map marker in center using AngularJS. Done by Sureshchan...
使用动态显示 Google Maps API，使用 AngularJS 获取数据库中的数据以显示地点、纬度、经度并在中心显示地图标记。由 Sureshchan 完成...
$(function() {
$http.get('school/transport/scroute/viewRoute?scRouteId=' + scRouteId).success(function(data) {
console.log(data);
for (var i = 0; i < data.viewRoute.length; i++) {
$scope.view = [];
$scope.view.push(data.viewRoute[i].stoppingName, data.viewRoute[i].latitude, data.viewRoute[i].longitude);
$scope.locData.push($scope.view);
}
var locations = $scope.locData;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, j;
for (j = 0; j < locations.length; j++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[j][1], locations[j][2]),
map : map
});
google.maps.event.addListener(marker, 'click', (function(marker, j) {
bounds.extend(marker.position);
return function() {
infowindow.setContent(locations[j][0]);
infowindow.open(map, marker);
map.setZoom(map.getZoom() + 1);
map.setCenter(marker.getPosition());
}
})(marker, j));
};
map.fitBounds(bounds);
});
});
