I need to dynamically change the radius of the circle when the user changes the number in the text box, but I can not use angular curly braces in the script tag. Is there an alternative that mirrors the way you can bind angular to html properties?
<script src="http://ift.tt/1pJirIT"></script>
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="PosCtrl">
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="Scripts/angular.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/PosCtrl.js"></script>
<script src="http://ift.tt/1ljOcT5"></script>
<script>
function initialize() {
var radius = 100000;
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(53, -2.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53, -2.5),
title: 'Some location'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: radius, // 10 miles in metres
fillColor: '#AA0000',
clickable : false
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(map = map, 'dblclick', function (event) {
alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
circle.radius = 1000;
circle.bindTo('center', marker, 'position');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
{{position.rad}}
<input ng-model="position.rad" />
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire