Question

我想要一个带谷歌地图的单选按钮。有没有办法使用谷歌地图而不是字符串的单选按钮。

我可以显示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>

Answer 1

Radiobuttons本身没有显示文字。您可以使用标签将可点击的内容与单选按钮相关联，如下所示：

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

Html替换单选按钮文本

1 个答案: