Javascript 更改谷歌地图API半径
我正在尝试更改google maps API上现有的圆半径。我正在使用,但下面是我尝试做的一个简单片段:Javascript 更改谷歌地图API半径,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我正在尝试更改google maps API上现有的圆半径。我正在使用,但下面是我尝试做的一个简单片段: $('#map').locationpicker({ location: { latitude: initLat, longitude: initLon }, radius: initRadius, zoom: initZoom,
$('#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>
位置:
半径:
惯性矩
var迭代=0;
var initLat=37.963922;
var initLon=-95.966002;
var-initZoom=3;
var initRadius=0;
$(“#映射”).locationpicker({
地点:{
纬度:initLat,
经度:initLon
},
半径:初始半径,
缩放:初始化缩放,
输入绑定:{
纬度输入:$(“#地图纬度”),
纵向输入:$(“#映射lon”),
locationNameInput:$(“#映射地址”),
半径输入:$(“#贴图半径”)
},
onchanged:函数(当前位置、半径、isMarkerDroped){
var mapContext=$('#map')。locationpicker('map');
mapContext.marker.setVisible(true);
mapContext.map.setZoom(13);
$(“#映射地址”).change(函数(){
迭代=0;
});
if(迭代<1&&radius>1){
半径=1;
var map_rad=document.getElementById(“映射半径”);
地图半径值=半径;
地图无线电调度事件(新事件(“变更”);
迭代++;
}
},
enableAutocomplete:正确,
addressFormat:'街道地址',
自动完成选项:{
组件限制:{国家:'us'}
}
});
特别感谢什么是“####”?是字符串还是数字?javascript控制台中有任何有趣的输出吗?####是以米为单位的数字。控制台显示:“未捕获类型错误:无法读取未定义的属性‘setRadius’”,正如我在回答中指出的,没有
圆圈mapContext的属性