在点击时显示半径圆 - Google地图

问题描述

我试图在点击标记上添加一个半径圆。我可以让圈子出现没有任何问题。我把这个圆放在它自己的函数中，然后将它附加到一个单击事件中。由于某种原因，它似乎并没有工作。任何人都可以照亮这种情况吗？

I am trying to add a radius circle around a marker on click. I can get the circle to appear without any issues. I have put the circle within it's own function and then attached it to a click event. For some reason it does not seem to work though. Can anyone shine any light on the situation please?

JSFiddle DEMO

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

推荐答案

将点击侦听器添加到标记中。

Add the click listener to the marker.

代码：

    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地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！