重新创建地图

Question

我使用angularjs的广场主题和使用它们的地图指令生成地图是这样的：

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

这是搜索页面上，并像工作时用户使用任何位置（文本地址）进行搜索时，它会相应地自动生成引脚到地图。

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

问题：

1. 任何人都可以建议我怎么能做到这一点？
2. 每次搜索时是否需要重新创建地图？
3. 如果是，那我该如何重新启动控制器 的指令？
4. 如果没有，那么有什么办法做到这一点？

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); 
      }; 

     } 
     }; 
    }]) 
;