Question

我正在尝试更改Google Maps API上的现有圆半径。我正在使用jquery-location-picker，但这里是我正在尝试做的一个简短的片段：

$('#map').locationpicker({
            location: {
                latitude: initLat,
                longitude: initLon
            },
            radius: initRadius,
            zoom: initZoom,
            inputBinding: {
                latitudeInput: $('#map-lat'),
                longitudeInput: $('#map-lon'),
                locationNameInput: $('#map-address'),
                radiusInput: $('#map-radius')
            },
            onchanged: function (currentLocation, radius, isMarkerDropped) {
                var mapContext = $('#map').locationpicker('map');
                mapContext.marker.setVisible(true);
                mapContext.map.setZoom(13);

                //CHANGE RADIUS HERE
                mapContext.circle.setRadius(###);

            },
            enableAutocomplete: true,
            addressFormat: 'street_address',
            autocompleteOptions: {
                componentRestrictions: { country: 'us' }
            }
        });

onchanged 事件中的其他所有内容都能正常运行，我尝试了here找到的各种内容但没有成功。

Answer 1

查看source code，似乎不是直接访问圈子的外部可用方式（当前时间）。更改链接到它的输入值会改变半径。代码是开源的，因此您可以对其进行修改以允许直接访问google.maps.Circle对象。

Answer 2

找到一个临时解决方案，不确定它是否合适但是有效。这只是强制更改事件，就像用户手动输入新半径一样，但仅在标记被删除或输入新地址时才会强制执行。

Location:
<input type="text" id="map-address" style="width: 200px" />
Radius:
<input type="text" id="map-radius" />mi
<input type="hidden" id="map-lat" />
<input type="hidden" id="map-lon" />
<div id="map" style="width: 500px; height: 400px;" />
<script>
    var iteration = 0;
    var initLat = 37.963922;
    var initLon = -95.966002;
    var initZoom = 3;
    var initRadius = 0;

    $('#map').locationpicker({
        location: {
            latitude: initLat,
            longitude: initLon
        },
        radius: initRadius,
        zoom: initZoom,
        inputBinding: {
            latitudeInput: $('#map-lat'),
            longitudeInput: $('#map-lon'),
            locationNameInput: $('#map-address'),
            radiusInput: $('#map-radius')
        },
        onchanged: function (currentLocation, radius, isMarkerDropped) {
            var mapContext = $('#map').locationpicker('map');
            mapContext.marker.setVisible(true);
            mapContext.map.setZoom(13);

            $("#map-address").change(function(){
                iteration = 0;
            });

            if (iteration < 1 && radius > 1) {
                radius = 1;
                var map_rad = document.getElementById("map-radius");
                map_rad.value = radius;
                map_rad.dispatchEvent(new Event('change'));
                iteration++;
            }
        },
        enableAutocomplete: true,
        addressFormat: 'street_address',
        autocompleteOptions: {
            componentRestrictions: { country: 'us' }
        }
    });
</script>

特别感谢Miscreant's modern solution.

更改谷歌地图API半径

2 个答案: