0

我有两个单选按钮和两张地图。我想在每张地图下方显示每个单选按钮。地图应该并排显示。我试过但没有成功。单选按钮出现在不相关的位置。请你帮助我好吗 ？ 

 <!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（你有一些奇怪的排序，两张地图之间没有一致性）

你想要做的是这样的：

<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 回答