AngularJS 指令中的 jQuery 代码

Question

我希望以下元素显示 Google 地图：

<div id="map" class="gmaps" ></div>

为此我添加了以下js：

<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

以下脚本代码正在调用ContactUs.init() 方法：

<script type="text/javascript">
    jQuery(document).ready(function() {
        ContactUs.init();
    });
</script>

contact-us.js 文件中的代码如下：

var ContactUs = function () {
    return {
        //main function to initiate the module
        init: function () {
            var map;
            $(document).ready(function(){
              map = new GMaps({
                div: '#map',
                lat: 41.156863,
                lng: -81.855722
            });
            var marker = map.addMarker({
                lat: 41.156863,
                lng: -81.855722,
                title: 'Foo Inc.',
                infoWindow: {
                    content: "<b>Foo Inc.</b><br>123 Bar Ave, Fred 940<br>San Francisco, CA 94124"
                }
            });

               marker.infoWindow.open(map, marker);
            });
        }
    };
}();

如何使用 <div id="map" class="gmaps" ></div> 元素中的 AngularJS 属性指令使上述代码工作？

编辑：

TypeError: Cannot read property 'Pool.<InfoWindowView>' of undefined
    at JT (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:56:919))), <anonymous>:3:861)
    at KT (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:56:919))), <anonymous>:4:31)
    at MT.(anonymous function).j (eval at <anonymous> (eval at <anonymous> (eval at <anonymous> (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:56:919))), <anonymous>:6:951)
    at http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:37:1008
    at $f (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:26:58)
    at Fh.map_changed (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:37:978)
    at Ze (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:19:190)
    at Fh.M.set (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:18:853)
    at Fh.(anonymous function).open (http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/6/%7Bmain,geometry,places%7D.js:37:807)
    at link (http://localhost:3000/javascripts/app.js:219:31) <div id="map" class="gmaps margin-bottom-40" style="height: 400px; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);"> 

显示谷歌地图的角部分代码：

<div class="main">
    <div class="container">
        <div class="row margin-bottom-40">
            <!-- BEGIN CONTENT -->
            <div class="col-md-12">
                <div class="content-page">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="map" class="gmaps margin-bottom-40" style="height:400px;"></div>
                        </div>
                        <div class="col-md-3 col-sm-3 sidebar2">
                            <h3 class="support">Our Contact Info</h3>
                            <!-- Remaining stuff-->
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CONTENT -->
        </div>
    </div>
</div>

Answer 1

你必须创建一个指令：

gmaps.js 实现：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('gmaps', function() {
  return {
    restrict: 'C', // restrict this directive to css class with name gmaps
    link: function() {
      var map = new GMaps({
        div: '#map',
        lat: 41.156863,
        lng: -81.855722
      });

      var marker = map.addMarker({
        lat: 41.156863,
        lng: -81.855722,
        title: 'Foo Inc.',
        infoWindow: {
          content: "<b>Foo Inc.</b><br>123 Bar Ave, Fred 940<br>San Francisco, CA 94124"
        }
      });

      marker.infoWindow.open(map, marker);
    }
  };
});

html:

  <body ng-controller="MainCtrl">
    <div id="map" class="gmaps" style="width:500px; height: 500px"></div>
    <p>Hello {{name}}!</p>
  </body>

标准谷歌API：

app.directive('gmaps', function($timeout) {
  return {
    restrict: 'C',
    link: function(scope) {

      var myLatlng = new google.maps.LatLng(41.156863,-81.855722);

      var mapOptions = {
        center: myLatlng,
        zoom: 8
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

      var infowindow = new google.maps.InfoWindow({
        content: "<b>Foo Inc.</b><br>123 Bar Ave, Fred 940<br>San Francisco, CA 94124"
      });

      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });

      infowindow.open(map, marker);

    }
  };
});

http://plnkr.co/edit/z4HAIdGaYjNa2waOcrqE?p=preview