Question

我正在尝试在点击时在标记周围添加半径圆。我可以让圈子出现没有任何问题。我已将圆圈放在其自己的功能中，然后将其附加到单击事件。出于某种原因，它似乎不起作用。任何人都可以对这种情况有所了解吗？

JSFiddle DEMO http://jsfiddle.net/yV6xv/3729/

var circle, map;
        function initialize()   
        {
            var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);

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

            // Marker Icons Implementation
               markers = new google.maps.Marker({
                position: centerLatlng,
                map: map,
                title: 'Center of Map'
            });
            // Add click event listenecal
            calcRadius(60000);
        };

        function calcRadius(radiusVal)
        {
            //console.log(document.getElementById("#radioBtn1").value);

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

                 circle = new google.maps.Circle({
                  map: map
                  radius : 9000,
                  strokeColor : '#BBD8E9',
                  strokeWeight : 2
                });

                console.log(circle);

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

        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

将点击监听器添加到标记。

updated fiddle

<强>代码：

    var circle, map;
    function initialize()   
    {
        var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);

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

        // Marker Icons Implementation
        markers = new google.maps.Marker({
            position: centerLatlng,
            map: map,
            title: 'Center of Map'
        });
        // Add click event listenecal
        calcRadius(markers, map, 60000);
    };

    function calcRadius(marker, map, radiusVal)
    {
        //console.log(document.getElementById("#radioBtn1").value);

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

             circle = new google.maps.Circle({
              map: map,
              fillColor : '#BBD8E9',
              fillOpacity : 0.3,
              radius : radiusVal,
              strokeColor : '#BBD8E9',
              strokeOpacity : 0.9,
              strokeWeight : 2
            });

            // console.log(circle);

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

    google.maps.event.addDomListener(window, 'load', initialize);

点击显示半径圆圈 - Google地图

1 个答案: