javascript - 在 Angular Material 中添加 ui-gmap-search-box

Question

我将 Angular Material 放入旧的 Angular 项目中，但遇到一个问题:ui-gmap-search-box 未按预期渲染。

这是我的代码:

<md-input-container class="md-icon-float md-block">
  <label>Telefonnummer</label>
  <md-icon md-font-set="material-icons">phone</md-icon>
  <input ng-model="controller.user.phoneNumber" type="number" name="phone" ng-minlength="8" required>
  <div ng-messages="signupForm.phone.$error" role="alert">
    <div ng-message="minlength">Bitte vollständigen Telefonnummer angeben.</div>
    <div ng-message="required">Bitte ein Telefonnummer angeben.</div>
  </div>
</md-input-container>

  <md-input-container class="md-icon-float md-block" id="searchContainer">
    <label>Adresse</label>
    <md-icon md-font-set="material-icons">home</md-icon>
  </md-input-container>


<ui-gmap-google-map class="smallMap col-xs-12" center='controller.map.center' zoom='controller.map.zoom'>-->
  <ui-gmap-search-box parentdiv="'searchContainer'" template="controller.searchbox.template"
                      events="controller.searchbox.events"
                      ng-model="controller.user.address.postalAddress"></ui-gmap-search-box>
  <ui-gmap-marker coords="controller.marker.coords" options="controller.marker.options"
                  events="controller.marker.events" idkey="controller.marker.id"></ui-gmap-marker>
</ui-gmap-google-map>

我想我明白为什么会发生错误:地址的文本字段是由 Angular Maps 添加的，而 Angular Material 则由 View 的渲染 -> 文本字段显示为纯文本字段。

问题:

• 我错过了什么吗？
• 有没有办法触发 Angular Material 渲染？
• Angular Maps 创建文本字段时是否调用了一个事件？

Answer 1

似乎没有直接的方法可以通过针对该场景的 ui-gmap-search-box 指令自定义搜索框。相反，我建议按照如下所示来完成它:

angular.module("search-box-example", ['uiGmapgoogle-maps', 'ngRoute', 'ngMaterial'])

  .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
    GoogleMapApi.configure({
      //key: '--Place key here--',
      libraries: 'places'
    });
  }])



  .controller("SearchBoxController", ['$scope', 'uiGmapLogger', '$http', 'uiGmapGoogleMapApi', 'uiGmapIsReady'
    , function ($scope, $log, $http, GoogleMapApi, uiGmapIsReady) {



      uiGmapIsReady.promise()
        .then(function (instances) {
          var map = instances[0].map;

          //init search control
          var searchInput = document.getElementById('pac-input');
          var searchBox = new google.maps.places.SearchBox(searchInput);
          var searchDiv = document.getElementById('searchContainer');
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchDiv);
          searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
              return;
            }
            $scope.displayPlaces(places);
          });
        });


      $scope.displayPlaces = function (places) {

        // Clear out the old markers.
        $scope.map.markers = [];

        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
          if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
          }
       

          // Create a marker for each place.
          $scope.map.markers.push({
            "id": 1, //place.id,
            "coords": {
              "latitude": place.geometry.location.lat(),
              "longitude": place.geometry.location.lng(),
            },
            "name": place.name,
            "address": place.formatted_address
          });

          if (place.geometry.viewport) {
            // Only geocodes have viewport.
            bounds.union(place.geometry.viewport);
          } else {
            bounds.extend(place.geometry.location);
          }



        });

        $scope.map.control.getGMap().fitBounds(bounds);
      };




      $scope.map = {
        control: {},
        center: {
          latitude: 55.755826,
          longitude: 37.6173
        },
        zoom: 8,
        dragging: false,
        markers: [
           
        ],
        events: {}
      };


    }]);

.angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
}


md-input-container {
    background-color: white;
    
}

md-input-container.md-icon-left {
    padding-right: 36px !important;
}

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" ; rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/angular/bower-material/master/angular-material.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.1/lodash.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.3.2/dist/angular-google-maps.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-aria.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-animate.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="search-box-example" ng-controller="SearchBoxController">

    <div id="searchContainer">
        <md-input-container class="md-icon-float md-block">
            <label>Address</label>
            <md-icon md-font-set="material-icons">home</md-icon>
            <input id="pac-input" placeholder="Address">
        </md-input-container>
    </div>

    <div>
        <ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" events="map.events" options="map.options"
            pan="true" control="map.control">

             <ui-gmap-markers  models="map.markers" coords="'coords'" ></ui-gmap-markers>

        </ui-gmap-google-map>

    </div>

</div>