javascript - 如何在移动浏览器中将谷歌地图居中

Question

我一直在努力将我的谷歌地图的标记固定在屏幕中央。但是即使我尝试了各种方法它仍然没有出现。

我只能在移动浏览器屏幕的左上角看到部分 map 。请帮帮我

这是JS

<script type="text/javascript">          
/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
$( document ).on( "pageinit", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>');
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        google.maps.event.trigger(map, 'resize');

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        marker.getPosition(latlng) ;
        map.setCenter(latlng);
    }
    $("#map_canvas").width(window.innerWidth).height(window.innerHeight);
}); 
</script>

这是html

<div  data-shadow="false" data-theme="c"  id="map-page"  data-role="page">
<div data-role="header" style="background:#006699 !important;color:#fff;">
<a data-rel="back" href="#pageone"  class="ui-nodisc-icon ui-new-btn" data-icon="location" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Go to Page One</a>
<h1>Header1 </h1>
<a data-rel="back"  href="#pageone"  class="ui-nodisc-icon ui-new-btn" data-icon="delete" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Back</a> 
</div>

    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    <!---</div> ---->
</div>
</div>

CSS

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

注意:这只发生在桌面的移动浏览器中，它加载正常

Answer 1

您的问题是您用来触发 map 初始化的页面事件。

pageinit 是一个糟糕的选择，因为 jQuery Mobile 仍未完全初始化。 pageshow 是唯一可以正确计算内容高度的页面事件，当 google maps v3 api 计算可用 map 空间时，高度很重要。

所以改变这个:

$( document ).on( "pageinit", "#map-page", function() {

为此:

$( document ).on( "pageshow", "#map-page", function() {

您可以找到工作示例 here .