如何使用angularjs执行以下功能?

时间:2015-12-10 15:48:05

标签: angularjs

这是angularjs地图和文本框创建代码.. 我需要的是,当用户在文本框中输入一个位置并按下输入后该位置应在地图中指示.... 请在这件事上给予我帮助... 提前谢谢......



<html ng-app="angular-google-maps-example">

    

<head>
	<meta charset="UTF-8">
	<title>angular-google-maps example</title>
	<style>
	.angular-google-map {
			display: block;
		}
	</style>
</head>
<body ng-controller="ExampleController">
	<google-map
		center="centerProperty"
		zoom="zoomProperty" 
		markers="markersProperty"
		latitude="clickedLatitudeProperty"
		longitude="clickedLongitudeProperty"
		mark-click="true"
		draggable="true"
		style="height: 450px; width: 100%">
	</google-map>

  <br>
  
  <textarea name="" class="eventDesc" id="" rows="5" placeholder="Full Address" ng-model="event.address"></textarea>
  
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
	<script src="/application/html/js/nlaplante/angular-google-maps/angular-google-maps.js"></script>
	
  
  
  <script>
	var module = angular.module("angular-google-maps-example", ["google-maps"]);
	function ExampleController ($scope) {
		angular.extend($scope, {
			centerProperty: {
				lat: 45,
				lng: -73
			},
          
			zoomProperty: 8,
          
			markersProperty: [ {
					latitude: 45,
					longitude: -74
				}],
			clickedLatitudeProperty: null,	
			clickedLongitudeProperty: null,
		});
	}
	</script>
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您的角度应用程序设置不正确,您需要先将控制器注册到角度应用程序,然后才能在ng-controller中使用它。

var module = angular.module("angular-google-maps-example", ["google-maps"]);

module.controller('ExampleController', function ExampleController ($scope) {
  angular.extend($scope, {
    centerProperty: {
      lat: 45,
      lng: -73
    },

    zoomProperty: 8,

    markersProperty: [ {
      latitude: 45,
      longitude: -74
    }],
    clickedLatitudeProperty: null,	
    clickedLongitudeProperty: null,
  });
});