0

2 番目の DIV ID で Google マップを表示できないのはなぜですか? Map_canvas を Class 同じ結果に変更しようとしました 2 番目の DIv に Google マップを表示したい map_canvas マップは jQueryMobile で実行されるため、表示ページの 2 番目の Div に移動する必要があります

ここに私のコードがあります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map</title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://www.google.com/jsapi"></script>
    <script>
        $(document).ready(function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success);
            } else {
                error('Geo Location is not supported');
            }
        });

        function success(position) {
            debugger;
            var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            var options = {
                zoom: 17,
                center: coords,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("my_maps").children[0], options);

            var marker = new google.maps.Marker({
                position: coords,
                map: map,
                title: "You are here!"
            });
        }
    </script>

    <style>
        html {
            height: 100%;
            overflow: hidden;
        }

        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #map_canvas {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="my_maps">
        <div id="map_canvas"></div>
    </div>
</body>
</html>
4

1 に答える 1

0

問題はDOM要素の選択方法ではないと思います。ラッピング div にandを
指定してみてください(map-div はそれに適合するはずです)。widthheight

<div id="my_maps" style="width:100%; height:500px;">
    <div id="map_canvas" style="width:100%; height:100%;"></div>
</div>

.children[]また、親ノードで使用しても問題ありませんが、これはより速くなるはずです：

document.getElementById('map_canvas');
于 2013-01-29T23:15:41.397 に答える