ng-map 和 place 自动完成在模态中不起作用答案

【问题标题】：ng-map and place autocomplete not working in modalng-map 和 place 自动完成在模态中不起作用
【发布时间】：2016-07-28 07:29:53
【问题描述】：

我正在使用 ng-map 指令并将自动完成 API 放置在我的 angularjs 应用程序中。哪些工作正常。但问题是我需要在引导模式中和当我在引导模式中使用相同的代码时，ng-map 和放置自动完成都不起作用。如果我遗漏了什么，建议我。仅当我使用 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

整个代码

【问题讨论】：

标签： angularjs google-maps autocomplete bootstrap-modal ng-map

【解决方案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，如果将多个地图实例添加到页面中，则该路径会阻止打印（在您的示例中，有两个地图实例）
在下面的示例中提供了一种解决方法。

工作示例

以下forked plunker 演示了如何：

在模态对话框中正确显示地图
在多个地图实例中打印路线

【讨论】：

你解决了我一半的问题。搜索自动完成仍然无法在模态中工作。

【解决方案2】：

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

从那里参考 Google Places Autocomplete not showing up

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

【讨论】：