Google maps 谷歌地图API V3-通过单击事件更改圆半径_Google Maps_Google Maps Api 3_Dom Events_Mouseclick Event

Google maps 谷歌地图API V3-通过单击事件更改圆半径

google-maps google-maps-api-3

Google maps 谷歌地图API V3-通过单击事件更改圆半径,google-maps,google-maps-api-3,dom-events,mouseclick-event,Google Maps,Google Maps Api 3,Dom Events,Mouseclick Event,我使用下面的代码显示半径为60.000m的逐点循环事件 <html> <head> <div id="map"></div> <style media="screen, projection" type="text/css"> map { width: 800px; height: 600px; } </style> </head> <body> &l

我使用下面的代码显示半径为60.000m的逐点循环事件

<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">

map {
        width: 800px;
        height: 600px;
      }

</style>
</head>
<body>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

</script><script type="text/javascript">

        function initialize()   
        {
            var mapCenter = new google.maps.LatLng(40, -74);

            var map = new google.maps.Map(document.getElementById('map'), {
                'zoom': 7,
                'center': mapCenter,
                'mapTypeId': google.maps.MapTypeId.ROADMAP
            });

            // Add click event listener

            google.maps.event.addListener(map, "click", function (e) {

                var image = new google.maps.MarkerImage(  
                         'image/data/ConstBuilder/marker.png',
                          new google.maps.Size(40, 35),
                          new google.maps.Point(0, 0),
                          new google.maps.Point(20, 30)
                        );

                var shadow = new google.maps.MarkerImage(
                         'image/data/ConstBuilder/shadow.png',   
                          new google.maps.Size(62, 35),    
                          new google.maps.Point(0, 0),    
                          new google.maps.Point(0, 35)
                        );

                var marker = new google.maps.Marker({
                      draggable: true,
                      raiseOnDrag: false,
                      icon: image,
                      shadow: shadow,
                      map: map,
                      position: e.latLng
                });

                var circle = new google.maps.Circle({
                    map: map,
                    radius: 60000,
                    fillColor: '#AA0000'
                });

                circle.bindTo('center', marker, 'position');
            });
        };

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>   
</body>
</html

有人能帮我找到解决方案吗？

尝试用此代码替换代码，更改部分位于正文标记之后

<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">

#map {
        width: 800px;
        height: 400px;
      }

</style>
</head>
<body>
<div>
30.000m <input type="radio" name="radiusBtns" id="radioBtn1" onclick="calcRadius(30000);" value="30" /><br />
60.000m<input type="radio" name="radiusBtns"  id="radioBtn2" onclick="calcRadius(60000);" value="60" /><br />
90.000m<input type="radio" name="radiusBtns"  id="radioBtn3" onclick="calcRadius(90000);" value="90" />
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

</script><script type="text/javascript">
        var circle, map, pre_radius;
        function initialize()   
        {
            pre_radius = '60000';

            var mapCenter = new google.maps.LatLng(40, -74);

            map = new google.maps.Map(document.getElementById('map'), {
                'zoom': 7,
                'center': mapCenter,
                'mapTypeId': google.maps.MapTypeId.ROADMAP
            });

            // Add click event listenecal
            calcRadius(60000);

        };

        function calcRadius(radiusVal)
        {
            //console.log(document.getElementById("#radioBtn1").value);
            pre_radius = radiusVal;
            google.maps.event.addListener(map, "click", function (e) {

                var image = new google.maps.MarkerImage(  
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                          new google.maps.Size(40, 35),
                          new google.maps.Point(0, 0),
                          new google.maps.Point(20, 30)
                        );

                var shadow = new google.maps.MarkerImage(
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',   
                          new google.maps.Size(62, 35),    
                          new google.maps.Point(0, 0),    
                          new google.maps.Point(0, 35)
                        );

                var marker = new google.maps.Marker({
                      draggable: true,
                      raiseOnDrag: false,
                      icon: image,
                      map: map,
                      position: e.latLng
                });

                circle = new google.maps.Circle({
                    map: map,
                    radius: pre_radius,
                    fillColor: '#AA0000'
                });

                console.log(circle);

                circle.bindTo('center', marker, 'position');
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>   
</body>
</html>


#地图{
宽度：800px；
高度：400px；
}
30.000米

60.000米

90.000米
var圆、地图、pre_半径；
函数初始化（）
{
前_半径='60000'；
var mapCenter=newgoogle.maps.LatLng（40，-74）；
map=new google.maps.map（document.getElementById（'map'）{
“缩放”：7，
“中心”：地图中心，
“mapTypeId”：google.maps.mapTypeId.ROADMAP
});
//添加单击事件列表
calcRadius（60000）；
};
函数calcRadius（radiusVal）
{
//console.log（document.getElementById（“#radioBtn1”）.value）；
pre_半径=radiusVal；
google.maps.event.addListener（映射，“单击”，函数（e）{
var image=new google.maps.MarkerImage（
'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
新谷歌地图大小（40,35），
新的google.maps.Point（0,0），
新谷歌地图点（20,30）
);
var shadow=new google.maps.MarkerImage(
'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',   
新谷歌地图大小（62,35），
新的google.maps.Point（0,0），
新google.maps.Point（0,35）
);
var marker=new google.maps.marker({
真的，
理由：错，
图标：图像，
地图：地图，
职位：e.latLng
});
圆圈=新的google.maps.circle({
地图：地图，
半径：前半径，
填充颜色：“#AA0000”
});
控制台日志（圆形）；
圆圈.bindTo（'中心'，标记，'位置'）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

使用单击事件而不是更改事件

希望它能起作用

谢谢

<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">

#map {
        width: 800px;
        height: 400px;
      }

</style>
</head>
<body>
<div>
30.000m <input type="radio" name="radiusBtns" id="radioBtn1" onclick="calcRadius(30000);" value="30" /><br />
60.000m<input type="radio" name="radiusBtns"  id="radioBtn2" onclick="calcRadius(60000);" value="60" /><br />
90.000m<input type="radio" name="radiusBtns"  id="radioBtn3" onclick="calcRadius(90000);" value="90" />
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

</script><script type="text/javascript">
        var circle, map, pre_radius;
        function initialize()   
        {
            pre_radius = '60000';

            var mapCenter = new google.maps.LatLng(40, -74);

            map = new google.maps.Map(document.getElementById('map'), {
                'zoom': 7,
                'center': mapCenter,
                'mapTypeId': google.maps.MapTypeId.ROADMAP
            });

            // Add click event listenecal
            calcRadius(60000);

        };

        function calcRadius(radiusVal)
        {
            //console.log(document.getElementById("#radioBtn1").value);
            pre_radius = radiusVal;
            google.maps.event.addListener(map, "click", function (e) {

                var image = new google.maps.MarkerImage(  
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                          new google.maps.Size(40, 35),
                          new google.maps.Point(0, 0),
                          new google.maps.Point(20, 30)
                        );

                var shadow = new google.maps.MarkerImage(
                         'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',   
                          new google.maps.Size(62, 35),    
                          new google.maps.Point(0, 0),    
                          new google.maps.Point(0, 35)
                        );

                var marker = new google.maps.Marker({
                      draggable: true,
                      raiseOnDrag: false,
                      icon: image,
                      map: map,
                      position: e.latLng
                });

                circle = new google.maps.Circle({
                    map: map,
                    radius: pre_radius,
                    fillColor: '#AA0000'
                });

                console.log(circle);

                circle.bindTo('center', marker, 'position');
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>   
</body>
</html>