0

2 つのラジオ ボタンと 2 つのマップがあります。各マップの下に各ラジオボタンを表示したい。また、マップは並べて表示する必要があります。試しましたが成功しませんでした。ラジオボタンは関係のない位置に表示されます。手伝っていただけませんか ？ 

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="inital-scale=1.0 , user-scalable=no" />
     <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>

            <script >
            function initialize() {

                var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);

                var mapOptions = {
                    zoom: 10,
                    center: fenway,
                    mapTypeId: google.maps.MapTypeId.ROADMAP

                };

                var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
              var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions);

            }
        </script>
    </head>

    <body onload="initialize()">


      <form >

        <div class="left-div" id="map_canvas" style="width: 500px; height: 500px;"></div>
        <input type="radio" name="A" id="choice1" value="c1" >A:
        <label for="choice1" >
        </label><br>

     <label for="choice2" >
          <input type="radio" name="B" id="choice2" value="c2" >B:
          <div class="right-div" id="map_canvas2" style="width: 500px; height: 500px;"></div>

        </label><br>

    </form>

これはCSSです

.left-div {
    float: left;
    margin-right: 8px;

}
.right-div {
    margin-left: 508px;

}​
4

2 に答える 2

1

私はHTMLをほぼ完全に書き直します（そこで奇妙な順序が行われ、2つのマップ間に一貫性がありません）

あなたがしたいことは次のようなものです：

<form>
    <div class="leftdiv>
        <div id="map1"></div>
        <input type="radio">A:
    </div>
    <div class="rightdiv">
        <div id="map2"></div>
        <input type="radio">B:<br>
    </div>
</form>

詳細とCSSはあなたが解決できるように残します...頑張ってください:)

于 2012-11-19T19:49:40.457 に答える
0

これで目的は果たせると思います。私は4つのdivを使用し、それらを固定幅で左に浮かせました。(デモ)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="inital-scale=1.0 , user-scalable=no" />
 <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>

        <script >
        function initialize() {

            var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);

            var mapOptions = {
                zoom: 10,
                center: fenway,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
          var map2= new google.maps.Map(document.getElementById("map_canvas2"),mapOptions);

        }
    </script>
</head>

<body onload="initialize()">


  <form >

    <div style="width:500px; float:left; height:600px" id="map_canvas"></div>
    <div style="width:500px; float:left; height:50px">     
    <input type="radio" name="A" id="choice1" value="c1" >A:<label for="choice1"></label><br>
    </div>
    <div style="width:500px; height:600px; float:left" id="map_canvas2"></div>
    <div style="width:500px; float:left; height:50px">          
    <label for="choice2" ><input type="radio" name="B" id="choice2" value="c2" >B:</label>
    </div>
</form>

</p>

于 2012-11-19T19:59:37.960 に答える