如何使谷歌地图像安卓手机中的谷歌地图应用程序一样工作

Posted 2023-05-09

【中文标题】如何使谷歌地图像安卓手机中的谷歌地图应用程序一样工作

【英文标题】：How to make the google map work like google map application in android phones

【发布时间】：2014-07-03 09:45:40

【问题描述】：

正如您在图片中看到的，我在屏幕左下角有放大缩小按钮。我想让它向上移动一点，或者添加一些新的 css 使其更易于使用。有人可以帮我解决这个问题吗？

感谢和问候

.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( "pageshow", "#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);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker(
            position: latlng,
            map: map,
            title: "Greetings!"
        );
        $( window ).resize(function() 
       google.maps.event.trigger(map, 'resize');
                      );

        map.setCenter(defaultLatLng);
    

); 
</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><?php echo $translate->text('Ubicación Aproximada')?> </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>


</div>

编辑1

将以下脚本添加到

$(window).bind( 'orientationchange', function(e)
    var ori = window.orientation ;
        w = (ori==90 || ori==-90) ? screen.height : screen.width;
        h = (ori==90 || ori==-90) ? screen.width : screen.height;
         $('#map-canvas').width(w);
         $('#map-canvas').height($(window).height()- $('#head1').height());


    );

结果为@​​987654322@

回答

这是我的问题的答案，它就像移动设备中的谷歌地图应用程序一样工作

<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( "pageshow", "#map-page", function() 
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 

   $('#map-canvas').height( $(window).height() - $('#head1').height());
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) 
        var myOptions = 
            zoom: 10,
            center: latlng,
            streetViewControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker(
            position: latlng,
            map: map,
            title: "Greetings!"
        );
        // this is our gem
            google.maps.event.addDomListener(window, "resize", function() 
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
        ); 
       
); 
$(window).bind( 'orientationchange', function(e)
          var ori = window.orientation ;
            w = (ori==90 || ori==-90) ? window.height : window.width;
            $('#map-canvas').width(w);
            $('#map-canvas').height( $(window).height() - $('#head1').height());    

    ); 
</script>

【问题讨论】：

发布您尝试过的代码或对其进行修改

@Richa 更新请查看我的更新

【参考方案1】：

发生这种情况是因为我的页面有一个标题，并且 id 为 #map-canvas 的 div 的大小等于 window size 。如果没有给出，那么我猜它的默认值。

所以我提取了标题的大小并减去窗口的大小并将其设置为 map-canvas。

这样

 var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);

或

$('#map-canvas').height( $(window).height() - $('#head1').height());

所以我的完整代码看起来像这样

<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( "pageshow", "#map-page", function() 
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 
   var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);
    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);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker(
            position: latlng,
            map: map,
            title: "Greetings!"
        );
        $( window ).resize(function() 
       google.maps.event.trigger(map, 'resize');
                      );

        map.setCenter(defaultLatLng);
    

); 
</script>

【讨论】：

但是在这个答案中有一个问题。当移动设备改变方向时，div #map-canvas 的尺寸应该根据没有发生的变化而改变

让我给你一个建议。如果您对此（您的）答案感到满意，请接受它（您可以为自己的问题做），以便其他人可以将其视为可行的解决方案。关于您的最后一个问题，您应该打开另一个专门针对它的问题。 PS。恭喜解决问题

感谢您的建议 :)，实际上 Stack 并没有让我接受我自己的答案，所以我更新了我的问题：D

【参考方案2】：

终于可以彻底解决问题了

这是脚本

<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( "pageshow", "#map-page", function() 
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 

   $('#map-canvas').height( $(window).height() - $('#head1').height());
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) 
        var myOptions = 
            zoom: 10,
            center: latlng,
            streetViewControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        ;
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker(
            position: latlng,
            map: map,
            title: "Greetings!"
        );
        // this is our gem
            google.maps.event.addDomListener(window, "resize", function() 
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
        ); 
       
); 
$(window).bind( 'orientationchange', function(e)
          var ori = window.orientation ;
            w = (ori==90 || ori==-90) ? window.height : window.width;
            $('#map-canvas').width(w);
            $('#map-canvas').height( $(window).height() - $('#head1').height());    

    ); 
</script>

现在它以 android 设备中的 Google 地图应用程序为中心