角度引導模式內的角度谷歌地圖搜索框

我使用這兩個酷角模塊，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};

的地圖作品除了搜索框它沒有顯示優良的代碼。

來源

2015-09-21 CENT1PEDE

當您包含google maps api時，是否包含地方庫？如果不是這可能是原因。還要檢查事件var是否已初始化。

像這樣：

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

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

來源

2015-11-16 10:47:36 anapap

林相當肯定它包括在內。我將它包含在Google API URL中。 '' – CENT1PEDE

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

來源

2016-01-19 11:10:50 YoBre

更好的後期則從來沒有，但我認爲搜索框模板字符串應該是一個路徑，而不是HTML。我試着在模板字符串中定義html，但這似乎不起作用。

如果您在使用html而不是路徑字符串時檢查瀏覽器控制檯，您會發現模板中存在「404未找到」。

在項目中，我使用以下設置：

我的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) { } 
    } 
}

該選項用於谷歌在搜索框中

打字時在searchTemplate.html映射提示我有以下的HTML代碼：

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

的{{ 'FINDLOCATION' | translate}}用於pascalprecht翻譯。

希望這會有所幫助。

來源

2016-04-12 12:06:25

角度引導模式內的角度谷歌地圖搜索框

回答

相關問題