1

我正在使用 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

对于整个代码

4

2 回答 2

2

由于地图以引导模式显示，因此需要在打开模式对话框后显式初始化地图，如下所示：

 $('#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包含一个错误，如果将多个地图实例添加到页面中（在您的示例中，有两个地图实例） ，则该错误会阻止打印路线（在您的示例中）
在下面的示例中提供了一种解决方法.

工作示例

以下分叉的 plunker演示了如何：

  • 在模态对话框中正确显示地图
  • 在多个地图实例中打印路线
于 2016-04-09T14:17:04.673 回答
-1

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

从那里参考 谷歌地方自动完成没有出现

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

于 2018-06-25T11:16:01.877 回答