1

をクリックするとmarker、info window左上隅に表示されますが、マーカーの上部に表示されるはずです。

これは状況のイメージです: http://i.stack.imgur.com/GHHDE.png

この要素のスタイルは、すべてのマーカーの infoWindow に対して左右の css プロパティを動的に設定する必要があります。しかし、生成された要素を見ると、左側または上部の css プロパティがないことがわかります...

<div class="ng-map-info-window" 
     style="cursor: default; 
            position:absolute; 
            width: 110px; 
            height: 84px;>

何か案が ？

------ 更新 (コードを挿入)

これは、情報ウィンドウを表示および非表示にするための私の angularjs コントローラーです

vm.showDetail = function (e, p) {
    vm.p = p;
    vm.map.showInfoWindow('foo-iw', p.locationId);
};

vm.hideDetail = function () {
    vm.map.hideInfoWindow('foo-iw');
};

これが私のUIです

<marker id='{{p.locationId}}' 
                   ng-repeat="p in locations track by $index" 
                   position="[{{p.locationX}},{{p.locationY}}]" 
                   on-click="vm.showDetail(p)">
                <marker>     
<info-window id="foo-iw">
           <div ng-non-bindable="">
                id: {{vm.p.locationId}}<br/>
                name: {{vm.p.locationName}}<br/> 
                <a href="#" ng-click="vm.clicked()">Click Here</a>
           </div>
     </info-window>
4

1 に答える 1

1

関数が 2 番目のパラメーターとしてマーカー オブジェクトshowInfoWindowを受け入れるため、情報ウィンドウが適切に配置されないため、次の行を置き換えます。

vm.map.showInfoWindow('foo-iw', p.locationId);

と：

vm.map.showInfoWindow('foo-iw', this);

また、投稿した例のいくつかのタイプミスを修正しました。修正されたバージョンは次のとおりです。

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function(NgMap) {
        var vm = this;

        NgMap.getMap().then(function(map) {
            vm.map = map;
        });
        vm.locations = [
            { locationId: 1, locationName: 'Oslo', locationX: 59.923043, locationY: 10.752839 },
            { locationId: 2, locationName: 'Stockholm', locationX: 59.339025, locationY: 18.065818 },
            { locationId: 3, locationName: 'Copenhagen', locationX: 55.675507, locationY: 12.574227 },
            { locationId: 4, locationName: 'Berlin', locationX: 52.521248, locationY: 13.399038 },
            { locationId: 5, locationName: 'Paris', locationX: 48.856127, locationY: 2.346525 }
        ];
        
        /*$scope.showCity = function(event, city) {
            $scope.selectedCity = city;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };*/

        vm.showDetail = function (e, p) {
          vm.p = p;
          //vm.map.showInfoWindow('foo-iw', p.locationId);
          vm.map.showInfoWindow('foo-iw', this);
        };

        vm.hideDetail = function () {
           vm.map.hideInfoWindow('foo-iw');
        };

    });
<link href="style.css" rel="stylesheet">
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        
        <marker id='{{p.locationId}}' 
                   ng-repeat="p in vm.locations track by $index" 
                   position="[{{p.locationX}},{{p.locationY}}]" 
                   on-click="vm.showDetail(p)">
        </marker>     
        <info-window id="foo-iw">
           <div ng-non-bindable="">
                id: {{vm.p.locationId}}<br/>
                name: {{vm.p.locationName}}<br/> 
                <a href="#" ng-click="vm.clicked()">Click Here</a>
           </div>
        </info-window>
    </ng-map>
</div>

于 2016-01-30T17:34:42.343 に答える