1

Googleマップでラジオボタンを表示したい。ラジオボタンの文字列の代わりにGoogleマップを使用する方法はありますか。

グーグルマップとラジオボタンを表示できます。

しかし、ラジオボタンのテキストをグーグルマップに置き換える方法がわかりません。手伝ってくれませんか？

HTMLコード

<!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);

        }
    </script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 500px"></div>


<form>
<input type="radio" name="A" value="c1">1<br>
<input type="radio" name="B" value="c2">2
</form>

</body>
</html>
4

1 に答える 1

2

ラジオボタン自体には表示テキストがありません。次のように、ラベルを使用して、クリック可能なものをラジオボタンに関連付けます。

<input type="radio" name="foo" id="foo1" /><label for="foo1">Foo #1</label>

したがって、テキスト以外のものを「クリック可能なもの」にしたい場合は、テキストを、この場合は Google マップ ウィジェットに置き換えるだけです。

<input type="radio" name="foo" id="foo1" />
<label for="foo1">
    <div id="map_canvas" style="width: 300px; height: 200px"></div>
</label>

編集: CSS が表示されていない場合、次のようなものがどこかにある可能性があります。

label
{
    display:block;
}

だからこれを試してください：

<input type="radio" name="foo" id="foo1" />
<label for="foo1" style="display:inline;">
    <div id="map_canvas" style="width: 300px; height: 200px"></div>
</label>
于 2012-10-25T04:20:33.223 に答える