谷歌地图API V3:使圆半径搜索标记可点击

Google Maps API V3: Make the circle of the radius search markers clickable

本文关键字：搜索 V3 API 谷歌地图更新时间：2023-09-26

我想让半径搜索函数的圆可以点击。我只想补充一点，当你点击圆圈时，地图的边界应该适合圆圈的位置。

因此，我做了以下更改，但没有成功：

使圆圈可点击：添加可点击：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());
        });
		
      }

感谢您的帮助

所提供示例的主要问题是，当对象本身尚未初始化时，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);
    }
});

以下是修改后的示例

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

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

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

如果您有var作用域问题，请尝试以这种方式在函数外声明var圆

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

并最终以另一种方式管理你的圆圈测试

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