javascript Google Map API setCenter 方法不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21571416/
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
Google Map API setCenter Method doesn't work
提问by Rui
So I have to add a "center" button to my page, which, when clicked the map will center on the pin by using setCenter Method. However, after I clicked my button, the maps goes blank instead of showing the center.
所以我必须在我的页面中添加一个“中心”按钮,当点击该按钮时,地图将使用 setCenter 方法以图钉为中心。但是,在我单击按钮后,地图变为空白而不是显示中心。
this is my code.
这是我的代码。
How to solve the problem? Thank you in advance!
如何解决问题?先感谢您!
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init() {
var addButton = document.getElementById("setcenter");
addButton.onclick = handleSetCenterButtonClicked;
getMyLocation();
}
window.onload = init;
function getMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
} else {
alert("Oops, no geolocation support");
}
}
function displayLocation(position) {
showMap(position.coords);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
}
var map;
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
var mapOptions = {
zoom : 18,
center : googleLatAndLong,
mapTypeId : google.maps.MapTypeId.SATELLITE
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
addMarker(googleLatAndLong);
}
var marker;
var markerArray = new Array();
function addMarker(latLong) {
var markerOptions = {
position : latLong,
map : map
};
marker = new google.maps.Marker(markerOptions);
markerArray.push(marker);
}
// this is my setCenter method function
function handleSetCenterButtonClicked(coords) {
var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
map.setCenter(latLng);
}
// this is my setCenter method function
</script>
回答by Anto Jurkovi?
Problem is in your function (besides a typo):
问题出在您的函数中(除了拼写错误):
function handleSetCenterButtonClicked(coords) {
var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
map.setCenter(latLng);
}
On click coords
is of type MouseEvent
which has no any information about lat/lng. It is not the same as MouseEvent
from google api. It is not clear to which value you want to set center. To position of user who opened your page? Or to some other value?
单击coords
时类型MouseEvent
没有任何关于 lat/lng 的信息。它与MouseEvent
来自 google api 的不同。不清楚您想将哪个值设置为中心。打开您的页面的用户的位置?或者其他一些价值?
If you want to position center to user location after he drags around you can add global variable:
如果你想在他拖动后将中心定位到用户位置,你可以添加全局变量:
var yourPos;
In function showMap()
set it to known value:
在函数showMap()
中将其设置为已知值:
yourPos = googleLatAndLong;
And use it in click handler:
并在点击处理程序中使用它:
function handleSetCenterButtonClicked(coords) {
//var latLng = new google.maps.LatLng(coords.lat(), coords.lng());
//map.setCenter(latLng);
map.setCenter(yourPos);
}
Besides that there is no handling of case if user doesn't want to share his position.
除此之外,如果用户不想分享他的位置,则没有处理案例。
回答by sandrita
I think the code is wrong:
我认为代码是错误的:
var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
It should be:
它应该是:
var latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
At the function handleSetCenterButtonClicked(coords) - Is "coords.longitude" not "coords.lotitude"
在函数 handleSetCenterButtonClicked(coords) - 是“coords.longitude”而不是“coords.lotitude”