谷歌地图在手机上居中

Question

我的问题是 Google 地图无法在手机上正确居中。 （我在 Android Lollipop 上看到了这个问题。它似乎不会发生在一个古老的旧 iPhone 3 上。我不知道其他人。）

地图在浮动框中打开，但第一次打开时，我指定为中心的点实际上在左上角。如果我关闭浮动框并再次打开它，地图就会正确显示。

我已经在网上搜索了这个问题，并找到了有关调整大小和重新定位的建议，所以我将其添加到代码中。

google.maps.event.trigger(map, 'resize');
map.setCenter(thisLatlng);

也许这些行在代码中的位置错误，尽管我尝试了许多变体但没有成功。地图的完整代码是

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="../js/infobox.js"></script>
<script type="text/javascript" src="../js/downloadxml.js"></script>
<script type="text/javascript"> 
//<![CDATA[
     // global "map" variable
      var map = null;

  var image = {
      url: '../images/small_icon.gif',
      size: new google.maps.Size(22, 27),
      origin: new google.maps.Point(0,0),
      anchor: new google.maps.Point(11, 25)
  };
  var hotelimage = {
      url: '../images/hotel_icon.gif',
      size: new google.maps.Size(32, 37),
      origin: new google.maps.Point(0,0),
      anchor: new google.maps.Point(16, 35)
  };

// InfoBox
 var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid #4d6eb0; margin-top: 8px; background: white; padding: 5px;";

        var ibOptions = {
         content: boxText
        ,closeBoxURL: ""
        ,disableAutoPan: false
        ,enableEventPropagation: true
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(15, -50)
        ,boxStyle: { 
         width: "160px"
         }
        };

// global "infobox" variable
  var ib = new InfoBox(ibOptions);

////////////////////////
// A function to create the markers and set up the event window function 
function createMarker(latlng, hotel) {
    var contentString = hotel;
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'mouseover', function() {
        boxText.innerHTML = contentString;
        ib.open(map, marker);
        });
      google.maps.event.addListener(map, 'click', function() {
        ib.close(map, marker);
        });
}

function initialize() {
      var lat = 0;
      var lng = 0;
      var zoom = 0;
      var hotelname = 0;
      var query = location.search.substring(1);
      query = query.replace(/\+/g, " ");
      var pairs = query.split("&");
      for (var i=0; i<pairs.length; i++) {
    var pos = pairs[i].indexOf("=");
    var argname = pairs[i].substring(0,pos).toLowerCase();
    var value = pairs[i].substring(pos+1);
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {zoom = parseInt(value);}
        if (argname == "hotel") {hotelname = unescape(value);}
      }
  var thisLatlng = new google.maps.LatLng(lat, lng);
  var mapOptions = {
center: thisLatlng,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
   streetViewControl: true,
   scaleControl: true,
   zoomControl: true
   }

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

//////////////////////
  var hotelmarker = new google.maps.Marker({
      position: thisLatlng,
      map: map,
      icon: hotelimage,
      zIndex: 9999
  });

var style_nopoi = [{"featureType": "poi", "stylers": [{"visibility": "off"}]}]; // Styles, removes points-of-interest. Lots of other possibilities.
map.setOptions({styles: style_nopoi});  // Applies the style to the map
google.maps.event.trigger(map, 'resize');
map.setCenter(thisLatlng); // Seems to fix random centring problem on mobiles

      google.maps.event.addListener(hotelmarker, 'mouseover', function() {
        boxText.innerHTML = hotelname;
        ib.open(map, hotelmarker);
        });
      google.maps.event.addListener(map, 'click', function() {
        ib.close(map, hotelmarker);
        });

////////////////////

      downloadUrl("php-to-xml.php", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var hotel=markers[i].getAttribute("hotel");
          var html=markers[i].getAttribute("html");

          createMarker(point,html);
        }

      });
    }

//]]>
</script> 
</head> 

<body onload="initialize()"> 
<div id="content">
<h1>Location - <?php echo $hotel; ?></h1>
<div id="map_canvas"></div>
<br />
</div>
</body> 
</html> 

我不得不承认我不理解页面中发生的所有事情。我从几个来源拼凑而成，但有很多关于 javascript 的内容我不明白。

Answer 1

好吧，我想我可能已经解决了。有点难以确定，因为问题似乎是随机发生的。

我在 google.maps.event.addListener 上阅读了更多内容，然后做了一些实验。

如果地图显示错误，此代码可以通过点击屏幕进行更正

google.maps.event.addListener(map, 'click', function() {
map.setCenter(thisLatlng);
});

这有利于概念验证，但如果用户不知道他们必须点击，则无济于事。所以我尝试了

google.maps.event.addListener(map, 'load', function() {
    map.setCenter(thisLatlng);
});

那没用。这并不奇怪，因为无论如何初始化函数都是由 body onload 控制的。因此，我寻找在用户没有任何操作的情况下会发生的其他事情，我最终得到了

google.maps.event.addListener(map, 'tilesloaded', function() {
    map.setCenter(thisLatlng);
});

编辑那也失败了。当有人从原始位置滚动地图时，Google 地图必须添加一些额外的图块，以便“加载图块”，然后将其翻转回原始中心。

再次编辑我再次尝试，修改代码使其仅工作一次：

var loadcnt = 0;
      google.maps.event.addListener(map, 'tilesloaded', function() {
        if (loadcnt==0) {
        map.setCenter(thisLatlng);
        loadcnt=loadcnt+1;
        }
        });

手指交叉！