繁体   English   中英

更改Google Maps API半径

[英]Change google maps API radius

我正在尝试更改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事件中的其他所有内容都可以正常运行,并且我尝试了此处找到的各种尝试,但均未成功。

看一下源代码 ,似乎没有一种外部可用的方法可以直接访问圈子(当前时间)。 更改与其链接的输入的值将更改半径。 该代码是开源的,因此您可以对其进行修改以允许直接访问google.maps.Circle对象。

找到了一个临时解决方案,不确定是否合适,但是可以正常工作。 这仅是强制进行更改事件,就像用户手动输入新的半径一样,但是仅当标记被放置或输入了新地址时才如此。

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的现代化解决方案。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM