试图显示googleMap:$元素是一个未知的提供者

时间:2016-04-05 16:10:37

标签: angularjs

嗨,我是angularJs的新手。我正在尝试显示googleMap。当我得到异常$ element unkown Provider时。我测试的代码是我在搜索时找到的代码。实际上我并没有得到它。

html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>  </title>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../angular/angular.js"></script>
<script src="../angular/angular-route.js"></script>


<script src="../src/controllers/app.js"></script>

</head>
    <body>
    <figure data-ng-controller="MapController">  
      <gmap></gmap>
    </figure> 
    </body>

我的脚本是:

myAppControllers.controller('MapController',function($scope,$element){

    console.log("tessstttt ");
    $scope.showMap();
    $scope.showMap = function()
    {
     const mapEl = $element.find('gmap')[0];
      const mapOptions = {
        zoom: 14,
        center: {lat: 34.075328, lng: -118.330432}       
      };
      const gmap = new google.maps.Map(mapEl, mapOptions);
      $scope.gmap = gmap;
    };
});

1 个答案:

答案 0 :(得分:0)

这不是制作简单谷歌地图的最佳方式。这是一个简单易懂的例子,用于检查:

HTML:

<div ng-controller="ControllerFirst">
<div id="maps"></div>
hello
</div>

JS:

angular.module('myApp', [])
.controller('ControllerFirst',function($scope){
        var mapOptions = {
            center: new google.maps.LatLng(50, 2),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };
          var map = new google.maps.Map(document.getElementById("maps"),mapOptions);
});

你可以在我的小提琴中查看这个:http://jsfiddle.net/javierif/p16cyuha/