ng-map和place autocomplete在模式下不起作用

Question

我正在使用ng-map指令，并将自动完成API放在我的angularjs应用程序中。它们工作得很好。但问题是，我既需要在引导模式中使用，也需要在引导模式中使用相同的代码时，ng-map和place autocomplete都不起作用。如果我遗漏了什么，请给我建议。只有当我使用angular的ng-map指令时才会出现问题。使用javascript，一切都很好，但我不想写大量代码。我只想使用ng-map。这是我的标记

<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
 <directions
        draggable="false"
        travel-mode="DRIVING"
        panel="p3"
        origin="jaipur"
        destination="Delhi">
      </directions>
  </ng-map>

查看我的plunkr

对于完整的代码

Answer 1

由于映射是以引导模式显示的，因此一旦打开模式对话框，就需要显式初始化映射，如下所示：

 $('#myModal').on('show.bs.modal', function(e) {
        $timeout(function() {
            google.maps.event.trigger(vm.dialogMap, 'resize');
            vm.dialogMap.setCenter(vm.mapSettings.center);
            vm.dialogMap.setZoom(vm.mapSettings.zoom);
        });
 }); 

一旦打开模式，就会触发

'show.bs.modal'事件。

另一方面，不幸的是，angularjs-google-maps目前包含一个bug，如果将多个地图实例添加到一个页面中，该are将阻止打印路线(在您的示例中有两个地图实例)

在下面的示例中提供了一种解决方法。

工作示例

以下演示了如何：

• 在模式对话框中正确显示地图
• 在多个地图实例中打印路径

Answer 2

添加样式.pac-container { z-index: 10000 !important；}

从那里引用Google Places Autocomplete not showing up

这里是你的工作示例http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview的plnkr