web-dev-qa-db-ja.com

Angularjsグーグルマップ-ウィンドウ付きマーカー-infowindowが表示されない

angular-google-mapsを使用してアプリを取得しようとしています：
-markersディレクティブを介した複数のマーカー
-windowディレクティブを介した単一の情報ウィンドウ

私はAPIとgit-hubサイトでの複数のクローズされた問題/質問を経験しましたが、それを機能させることができません...：-/

jsfiddle

簡単にするために、マーカーを手動で宣言しています（そしてマーカーは正しく表示されています）。

_$scope.markers = [
    {
        id: 0,
        coords: {
            latitude: 37.7749295,
            longitude: -122.4194155
        },
        data: 'restaurant'
    },
    {
        id: 1,
        coords: {
            latitude: 37.79,
            longitude: -122.42
        },
        data: 'house'
    },
    {
        id: 2,
        coords: {
            latitude: 37.77,
            longitude: -122.41
        },
        data: 'hotel'
    }
];
_

Htmlは次のようになります。

_<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>
_

このコードを使用して、onClick関数をmarkers配列に適用しています

_$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray, function(value, key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
}; 
_

_marker click_関数は次のようになります

_$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};
_

コンソールが期待されるものを出力するため、$scope.onClick()関数はmarkerクリックで機能しているようです-そして_$scope.windowOptions.show_値はtrueとfalse.。

window htmlをコントローラーの配列と関数に接続した方法だと思いますか？どんな助けでも大歓迎です。

PSAPIドキュメント 例 例ではshowを使用していないため、古くなっているようですが、むしろ_options.visible_でinfowindowsを表示および非表示にします-しかし、すべての issues /の例では、代わりにshowを使用することをお勧めしますか？

angularjsinfowindowmarkerangular-google-maps
7
goredwards

ウィンドウディレクティブでのマーカーのバインドが正しくありません。

基本的に、クリック時に選択したマーカーを設定し、ウィンドウをその選択したマーカーにバインドする必要があります。実用的な例については、jsfiddleを参照してください。

<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

http://jsfiddle.net/gqkmyjos/

5
Myles

私はこれが古い投稿であることを知っています。

しかし、最近私はこれをやろうと奮闘しており、さらに、受け入れられた答えのjsfiddleが壊れており、最新バージョンのangular-google-mapsディレクティブでは機能しません。それで、私はそれが他の人々を助けることができることを望んで働くプランカーを共有することに決めました。

ここのプランカー

このバージョンでは、複数のマーカーがレンダリングされていますが、ウィンドウは1つだけです。同時に開くことができるウィンドウは1つだけです。

公式サイトのアドバイスに基づいています FAQセクション ：を参照してください一度に1つのウィンドウだけを開くにはどうすればよいですか？

html

<ui-gmap-google-map center="map.center" zoom="map.zoom">

  <ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    options="map.window.options" 
    closeClick="map.window.closeClick()"
    templateUrl="'infowindow.tpl.html'" 
    templateParameter="map.window">
  </ui-gmap-window>

  <ui-gmap-markers  
    models="map.markers" 
    coords="'self'"  
    events="map.markersEvents"
    options="'options'">
  </ui-gmap-markers>

</ui-gmap-google-map>

js

$scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [],  // Markers here
  markersEvents: {
    click: function(marker, eventName, model) {
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};

それが役に立てば幸い。

10
troig

これが古い投稿であることは知っていますが、Angular Google Mapで苦労し、マーカー用に1つのウィンドウを開いたときの問題を解決しました。それぞれにng-repeatとwindowを使用すれば、問題はありません。しかし、マーカーディレクティブがあり、ウィンドウを1つだけ表示したい場合は、問題が発生します。ウィンドウがマーカーの上に配置されないため、位置を少し変更する必要があります。その方法は？私の経験を共有しましょう。

次のようなウィンドウオプションには、pixelOffsetを指定する必要があります。

JS：

$scope.windowOptions = {
    pixelOffset : {
        height: -25,
        width: 0
    }
};

HTML：

<ui-gmap-window coords='selectedmarker.coords' show='true'  options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>

それでおしまい。必要に応じてheightを変更します。

3
d7p4x

次のようなクリックで、スコープにマーカーモデルを設定することをお勧めします。

マーカークリックコールバック：

$scope.onClick = function(marker) {
  $scope.selectedMarker = marker.model;
}

次に、ディレクティブでselectedMarkerを使用します。

<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>

シンプル。マーカーモデルに原因の経度と緯度のセットがあることを前提としています

0
Adam Spence