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地图必须添加一些额外的图块，以便“tileloaded”然后将其翻转回原始中心。

再次编辑我再次尝试修改代码，使其只能运行一次：

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

手指交叉！

在移动设备上对谷歌地图进行居中

1 个答案: