Question

我正在使用ng-map指令并在我的angularjs应用程序中放置自动完成API。工作正常。但问题是我需要两个在bootstrap模式中，当我在bootstrap模式中使用相同的代码时，Nothing既不工作也不工作自动完成。建议我，如果我错过了什么。只有当我使用angular＆＃ng; s 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

由于地图以bootstrap模式显示，因此一旦打开模态对话框，地图需要显式初始化，如下所示：

text-center

一旦打开模态，就会触发
$('#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); }); });事件。

另一方面，遗憾的是angularjs-google-maps目前包含一个bug，如果将多个地图实例添加到页面中，则会阻止打印路线（在您的示例中有两个< / strong>地图实例）
在下面的示例中提供了一种解决方法。

工作示例

以下forked plunker演示了如何：

在模态对话框中正确显示地图

在多个地图实例中打印路线

Answer 2

添加样式 .pac-container {z-index：10000！important; }

从那里引用 Google Places Autocomplete not showing up

此处为您的工作示例 http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview

ng-map和放置自动完成功能不适用于模态

2 个答案: