使用输入类型=“0”改变Circle谷歌地图的半径;“范围”;
Change the radius of Circle google map using input type="range"
我正在尝试使用输入type="range"动态更新半径的值。我已经得到了我的标记,中心,圆和默认半径。如何使用输入type="range"的值更新半径的值。任何人请!!
<input type="range" min="100" max="500" name="userlevelofsurfing" ng-model="data.levelvalue" ng change="setLevelText()">
{{data.levelvalue }}m
var mrgdata='http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lang+'&sensor=true'
$http.get(mrgdata).success(function (response) {
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.data = {
levelvalue: 100,
level1wordDescription: "INTERMEDIATE+",
testvariable: 100
}
$scope.setLevelText = function() {
console.log('range value has changed to :'+$scope.data.levelvalue);
$scope.data.testvariable = $scope.data.levelvalue;
}
circle = new google.maps.Circle( {
map : map,
center : myLatlng,
radius : $scope.data.testvariable,
//editable: true,
strokeColor : '#FF0099',
strokeOpacity : 1,
strokeWeight : 2,
fillColor : '#009ee0',
fillOpacity : 0.2
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Current Location'
});
$scope.map = map;
}).error(function (data, status, headers, config) {
console.log("error");
});
当值发生变化时,可以在输入上使用ng-change
属性来激发函数:
<input
type="range"
min="1"
max="601"
step="100"
ng-change="updateCircleRadius(radius)"
ng-model="radius"
>
使用控制器中的设置来用新半径更新圆:
$scope.updateCircleRadius = function(val) {
circle.setRadius(Number(val))
}
现场演示
相关文章:
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 使用输入类型=“0”改变Circle谷歌地图的半径;“范围”;
- 谷歌地图,Javascript可变范围
- 如何创建带有多个标记的谷歌地图,从当前位置到10公里的矩形范围
- 谷歌地图api检查标记在绑定范围内
- 谷歌地图变量的范围和调用方法
- 谷歌地图或其他服务,以获取指定范围内的地方列表
- 与谷歌地图变量范围共同描述
- 为什么我的范围选择器在我的谷歌地图API3/jQuery移动应用程序中不起作用
- 谷歌地图地理编码功能-范围
- 检测标记是否在谷歌地图上的圆圈覆盖范围内(Javascript API V3)
- 谷歌地图和范围内的油脂猴子
- 试图清除谷歌地图标记时的范围问题
- 在谷歌地图 API 中单击并拖动选择一个半径范围的位置
- 我可以将地图限制为只在谷歌地图融合层的范围内搜索吗?
- 将你周围1公里范围内的照片上传至谷歌地图