Question

我正在使用这两个很酷的Angular模块，Angular Google Map和Angular UI Bootstrap。

我想要实现的是将google map与search box放在modal内，地图单独运行正常但是当我添加search box时会出现冲突。

这是我到目前为止所拥有的。

<script type="text/ng-template" id="modalTemplate.html">
<div class="modal-header">
    <h3 class="modal-title">Title</h3>
</div>
<div class="modal-body">

    <div class="row">
        <div class="col-xs-12">

            <div style="width:100%;">
                <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
                    <ui-gmap-search-box template="searchbox.template" events="searchbox.events"></ui-gmap-search-box>
                </ui-gmap-google-map>
            </div>

        </div>
    </div>

</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="close()">Close</button>
</div>

在地图上controller：

以下是search box $scope.searchbox = { template:'<input type="text" placeholder="Search Box">', events:events};

的代码

地图工作正常，但搜索框没有显示。

Answer 1

最好迟到，但我认为搜索框模板字符串应该是路径，而不是HTML。我尝试了在模板字符串中定义html，但这似乎不起作用。

如果您在使用html而不是路径字符串时检查浏览器控制台，则会看到模板中存在“404 not found”。

在我的项目中，我使用以下设置：

我的地图和搜索框的HTML：

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
       <ui-gmap-search-box template="searchBox.template" events="searchBox.events" options="searchBox.options"></ui-gmap-search-box>
</ui-gmap-google-map>

我的控制器中的搜索框的以下代码：

$scope.searchBox = {
    template: 'app/components/setting/area/newarea/searchTemplate.html',
    options: {
        autocomplete: true,
        types: ['address'],
        componentRestrictions: { country: bounderies }
    },
    events: {
        place_changed: function (searchBox) { }
    }
}

在搜索框中输入时，选项用于Google地图提示

在searchTemplate.html中，我有以下HTML代码：

<input type="text" placeholder="{{'FINDLOCATION' | translate}}">

{{'FINDLOCATION'| translate}}用于pascalprecht翻译。

希望这有帮助。

Answer 2

当您添加Google地图API时，您是否包含了地点库？如果不是这可能是原因。还要检查事件var是否已初始化。

像这样：

https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false

var events = {
        places_changed: function (searchBox) {
            //do something
        }
}

Answer 3

.pac-container {
  z-index: 1051;
}

角度引导模态

3 个答案: