angularjs - 通过谷歌地图的angularjs指令重新创建 map

Question

我正在使用 angularjs 的方形主题并使用他们的 map 指令来生成这样的 map :

<map class="ui-map" zoom="7" center="[32.794065, -97.439365]" style="height:250px !important;" >
</map>

这是在搜索页面上，就像用户使用任何位置(文本地址)搜索时一样，它会自动生成相应的图钉。

现在的问题是它会生成图钉，但不会在生成图钉的位置移动或缩放 map 。

问题:

谁能建议我该怎么做？

每次搜索时我都需要重新创建 map 吗？

如果是，那么我如何从 Controller 重新初始化指令
边？

如果否，那么有什么方法可以做到这一点？

Answer 1

我已经实现了一个不错的搜索，你可以从这里查看源代码

http://malix.io/SyrVet/#/

}])

    .directive('map', ['$compile', '$templateCache', '$timeout', 'Geo', 'Drive', function($compile, $templateCache, $timeout, Geo, Drive) {
      return {
        restrict: 'C',
        template: '<div>A</div>',
        replace: true,
        scope: {
          dealers: '=',
          search: '=',
          searching: '='
        },
        link: function(scope, ele, attrs) {

          var body = angular.element(document.querySelector('body'));

          console.log(body);

          var markers = [];
          var center = [-94.2861328, 56.2571657];

          function clearOverlays() {
            for (var i = 0; i < markers.length; i++) {
              markers[i].setMap(null);
            }
            markers.length = 0;
          }

          var latlng = new google.maps.LatLng(56.2571657, -94.2861328);//(45.8, -72);
          var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(ele[0], myOptions);

          var geocoder = new google.maps.Geocoder();

          scope.windowInfo = {
            title: 'window',
            desc: 'desc'
          }
          var infoWindowTemplate = $templateCache.get('infoWindowTemplate').trim();
          var infoWindowElem = $compile(infoWindowTemplate)(scope);
          window.infowindow = new google.maps.InfoWindow({
            content: infoWindowElem[0],
            disableAutoPan: true,
            maxWidth: Math.min(480, window.innerWidth)
          });

          function makeBounds(data) {
            return new google.maps.LatLngBounds(
                new google.maps.LatLng(data.southwest.lat,data.southwest.lng),
                new google.maps.LatLng(data.northeast.lat,data.northeast.lng))
          }
          scope.$watch('search', function(a) {
            clearOverlays();
            var code = ('' + a).replace(/ /g, '').toUpperCase();
            if (a && code !== a) {
              scope.search = code;
            }
            if (a && (a.length === 3 || a.length === 6)) {
              scope.searching = true;
              Drive.geocode(a).then(function(data) {
                scope.searching = false;
                if (!data) {
                  scope.search = '';
                  return;
                }
                center = data;
                var postal_rectangle = new google.maps.Rectangle({
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.5,
                  strokeWeight: 1,
                  fillColor: '#FF0000',
                  fillOpacity: 0.1,
                  map: map,
                  bounds: makeBounds(data[2])});

                markers[markers.length] = postal_rectangle;

                var marker = new google.maps.Marker({
                  map: map,
                  position: new google.maps.LatLng(data[1], data[0]),
                  title: a.toUpperCase(),
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png'//http://labs.google.com/ridefinder/images/mm_20_red.png'//'home.png'//'http://maps.google.com/mapfiles/kml/shapes/arrow.png'
                });
                markers[markers.length] = marker;
                scope.OK = function() {
                  map.setCenter(marker.getPosition());
                  map.setZoom(8);
                  window.infowindow.close();
                }
                scope.dealers.forEach(mapDealer);
                scope.OK();
              });
            }
          });


          var delay = 10;

          function addMarker(dealer, lat, lng) {
            var dist = Geo.distance(center, lat, lng);
            if (dist > 201) return;
            var marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(lat, lng),
              title: dealer[0]
              //icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
            });
            google.maps.event.addListener(
                marker, 'mousedown', function() {
                  body.addClass('wait');
                  window.infowindow.close();
                  $timeout(function() {
                    map.setCenter(marker.getPosition());
                    map.setZoom(11);
                    scope.windowInfo.title = dealer[0];
                    scope.windowInfo.address = dealer[1].replace('', '');
                    scope.windowInfo.telephone = dealer[2];
                    scope.windowInfo.distance = dist.toFixed(0)
                    window.infowindow.setOptions({maxWidth: Math.min(480, window.innerWidth)});
                    window.infowindow.open(marker.get('map'), marker);
                    body.removeClass('wait');
                  }, 100);
                });

            marker.infowindow = infowindow;
            markers[markers.length] = marker;
            marker.orderid = markers.length;
          }

          function mapDealer(dealer, index) {
            var found = !!(dealer, dealer[3] && dealer[3].length && dealer[4] && dealer[4].length && true);
            if (found) {
              delay += 10;
            } else {
              delay += 750;
            }
            setTimeout(function() {
              if (found) {
                addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));
              } else {
                var parts = dealer[1].split(/(?:,\s?)/gi);
                var options = {
                  'address': parts[0]
                };
                var code = /([A-Z][0-9][A-Z] [0-9][A-Z][0-9])/gi.exec(dealer[1])[0];
                if (code) {
                  options.componentRestrictions = { postalCode: code,
                    country: 'CA'};
                }
                geocoder.geocode(options, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    dealer[3] = results[0].geometry.location.lat();
                    dealer[4] = results[0].geometry.location.lng();

                    console.log(dealer);

                    addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));

                  } else {
                    console.log(options, arguments);
                  }
                });
              }
            }, delay);
          };

        }
      };
    }])
;