Question

我在Corona SDK中使用Google地图，但在加载地图时遇到问题。它不是缩放或不清晰可见，如下所示：

这是我的代码块，它位于HTML文件中：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
height: 100%; margin: 0; padding: 0 ;
}
#mapContainer {
height: 100% ;


}
</style>

<script type="text/javascript" src="<script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=]]..APIkey..[[&sensor=true"></script>
</head>
<body>

<div id="mapContainer">
</div>


    <div id="mapContainer">
    </div>

    <script type="text/javascript">
        var mapContainer = $( "#mapContainer" );

        map = new google.maps.Map(
                                  mapContainer[ 0 ],
                                  {
                                  zoom: 20,
                                  center: new google.maps.LatLng(
                                                                 -22.902145,
                                                                 -43.177049
                                                                 ),

                                  mapTypeId: google.maps.MapTypeId.ROADMAP
                                  }
                                  );
        function addMarker( latitude, longitude, label ){
            var im = "http://www.robotwoods.com/dev/misc/bluecircle.png"

            var marker = new google.maps.Marker({
                                                map: map,
                                                position: new google.maps.LatLng(
                                                                                 latitude,
                                                                                 longitude
                                                                                 ),
                                                icon: im
                                                });
            return( marker );
        }

        function updateMarker( marker, latitude, longitude, label ){

            marker.setPosition(
                               new google.maps.LatLng(
                                                      latitude,
                                                      longitude
                                                      )
                               );

            if (label){

                marker.setTitle( label );

            }
        }

        if (navigator.geolocation) {

            var locationMarker = null;

            navigator.geolocation.getCurrentPosition(
                                                     function( position ){

                                                     if (locationMarker){
                                                     return;
                                                     }

                                                     locationMarker = addMarker(
                                                                                position.coords.latitude,
                                                                                position.coords.longitude,
                                                                                "Initial Position"
                                                                                );

                                                     },
                                                     function( error ){
                                                     },
                                                     {
                                                     timeout: (5 * 1000),
                                                     maximumAge: (1000 * 60 * 15),
                                                     enableHighAccuracy: true
                                                     }
                                                     );

            var positionTimer = navigator.geolocation.watchPosition(
                                                                    function( position ){

                                                                    updateMarker(
                                                                                 locationMarker,
                                                                                 position.coords.latitude,
                                                                                 position.coords.longitude,
                                                                                 "Updated / Accurate Position"
                                                                                 );

                                                                    }
                                                                    );


            setTimeout(
                       function(){
                       navigator.geolocation.clearWatch( positionTimer );
                       },
                       (1000 * 60 * 5)
                       );


var uri

if(]]..chk..[[)
uri ="http://192.168.1.202/streetculture/images/1/img1.png"
var image = new google.maps.MarkerImage(uri,
                                        new google.maps.Size(50, 70),
                                        new google.maps.Point(0,0),
                                        new google.maps.Point(20, 28)
                                        );
              ]]..markerString..[[


if(]]..chk2..[[)
 uri ="http://192.168.1.202/streetculture/images/1/img_map_pin_pink.png"
    var image = new google.maps.MarkerImage(uri,
                                            new google.maps.Size(50, 70),
                                            new google.maps.Point(0,0),
                                            new google.maps.Point(20, 28)
                                            );
   ]]..markerString..[[



}
</script>
</body>
</html>

我在网络视图中加载此HTML文件。

Answer 1

我已经解决了这个问题，我们需要把

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

用于网页的移动设备

使用Corona SDK无法正确显示Google地图

1 个答案: