Question

我想让半径搜索功能的圆圈可以点击。我只想添加这个，当你点击圆圈时，地图的边界应该适合圆圈位置。

所以我做了以下修改但没有成功：

点击圈子：添加 clickable：true，
添加事件监听器： google.maps.event.addListener（circle，'click'，function（）{map.fitBounds（circle.getBounds（））;}）;

function codeAddress() {
        var address = document.getElementById('address').value;
        var radius = parseInt(document.getElementById('radius').value, 10)*1000;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            side_bar_html = "";
            map.setCenter(results[0].geometry.location);
            var searchCenter = results[0].geometry.location;
            /*
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            */
            if (circle) circle.setMap(null);
            circle = new google.maps.Circle({center:searchCenter,
                                             radius: radius,
                                             fillOpacity: 0.35,
                                             fillColor: "#FF0000",
                                             clickable: true,
                                             map: map});
            var bounds = new google.maps.LatLngBounds();
	    var foundMarkers = 0;
            for (var i=0; i<gmarkers.length;i++) {
              if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) < radius) {
                bounds.extend(gmarkers[i].getPosition())
                gmarkers[i].setMap(map);
                // add a line to the side_bar html
                side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
		foundMarkers++;
              } else {
                gmarkers[i].setMap(null);
              }
            }
            // put the assembled side_bar_html contents into the side_bar div
            document.getElementById("side_bar").innerHTML = side_bar_html;
            if (foundMarkers > 0) {
              map.fitBounds(bounds);
	    } else {
              map.fitBounds(circle.getBounds());
            }
            // makeSidebar();
            // google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);

          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
		
		 google.maps.event.addListener(circle, 'click', function() {
            map.fitBounds(circle.getBounds());
        });
		
      }

感谢您的帮助

Answer 1

提供的示例的主要问题是，当对象本身无法初始化时，click事件将附加到google.maps.Circle对象。

解决方案是在初始化对象后附加事件处理程序：

geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var side_bar_html = "";
        map.setCenter(results[0].geometry.location);
        var searchCenter = results[0].geometry.location;
        if (circle) circle.setMap(null);
        circle = new google.maps.Circle({
            center: searchCenter,
            radius: radius,
            fillOpacity: 0.35,
            fillColor: "#FF0000",
            clickable: true,
            map: map
        });

        //attach click event handler 
        google.maps.event.addListener(circle, 'click', function () {
            map.fitBounds(circle.getBounds());
        });

        //remaing code goes here...

    } else {
        alert('Geocode was not successful for the following reason: ' + status);
    }
});

下面显示了修改后的示例

＆＃13;

var geocoder;
var map;
var circle;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 8,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
    var address = document.getElementById('address').value;
    var radius = parseInt(document.getElementById('radius').value, 10) * 1000;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var side_bar_html = "";
            map.setCenter(results[0].geometry.location);
            var searchCenter = results[0].geometry.location;
            if (circle) circle.setMap(null);
            circle = new google.maps.Circle({
                center: searchCenter,
                radius: radius,
                fillOpacity: 0.35,
                fillColor: "#FF0000",
                clickable: true,
                map: map
            });

            google.maps.event.addListener(circle, 'click', function () {
                map.fitBounds(circle.getBounds());
                document.getElementById('output').innerHTML += 'Clicked';
            });
            
            //the remaing code goes here...

        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
    
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html, body, #map-canvas {
    height: 240px;
    margin: 0px;
    padding: 0px;
}

#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="panel">
   <input id="address" type="textbox" value="Sydney, NSW">
   <input id="radius" type="textbox" value="100">
   <input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
<pre id="output"></pre>

＆＃13;

Answer 2

似乎你有一个范围问题尝试以这种方式在函数外面声明var circle

var circle;
function codeAddress() {
        var address = document.getElementById('address').value;
        .....
        .....

并最终以另一种方式管理您的圈子测试

     //if (circle) circle.setMap(null);

Google Maps API V3：使半径搜索标记的圆圈可以点击

2 个答案: