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