Google Map API setCenter 方法不起作用

Posted 2023-02-23

【中文标题】Google Map API setCenter 方法不起作用

【英文标题】：Google Map API setCenter Method doesn't work

【发布时间】：2014-02-05 07:45:23

【问题描述】：

所以我必须在我的页面上添加一个“中心”按钮，当单击该按钮时，地图将使用 setCenter 方法以图钉为中心。但是，在我单击按钮后，地图变为空白，而不是显示中心。

这是我的代码。

如何解决问题？ 提前谢谢！

<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>

【参考方案1】：

问题出在你的函数中（除了错字）：

  function handleSetCenterButtonClicked(coords) 

    var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);
    map.setCenter(latLng);
  

点击时coords 是MouseEvent 类型，它没有关于纬度/经度的任何信息。它与来自 google api 的MouseEvent 不同。目前尚不清楚您要将哪个值设置为中心。打开您的页面的用户的位置？还是其他价值？

如果你想在他拖动后将中心定位到用户位置，你可以添加全局变量：

var yourPos;

在函数showMap() 中将其设置为已知值：

yourPos = googleLatAndLong;

并在点击处理程序中使用它：

  function handleSetCenterButtonClicked(coords) 

    //var latLng = new google.maps.LatLng(coords.lat(), coords.lng());
    //map.setCenter(latLng);

    map.setCenter(yourPos);
  

此外，如果用户不想分享他的位置，则不处理任何情况。

【讨论】：

非常感谢，很有道理。

【参考方案2】：

我认为代码错误：

var latLng = new google.maps.LatLng(coords.latitude, coords.lotitude);

应该是：

var latLng = new google.maps.LatLng(coords.latitude, coords.longitude);

在函数handleSetCenterButtonClicked(coords) - 是“coords.longitude”而不是“coords.lotitude”