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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:13:08  来源:igfitidea点击:

Google Map API setCenter Method doesn't work

javascriptapigoogle-mapsgeolocation

提问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 coordsis of type MouseEventwhich has no any information about lat/lng. It is not the same as MouseEventfrom 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”