Question

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

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

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

您的问题是用于触发地图初始化的页面事件。

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

所以改变这个：

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

到此：

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

您可以找到工作示例 here 。

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

1 个答案: