在angularjs中用ng-map显示多个信息窗口 [英] show multiple info-windows with ng-map in angularjs

问题描述

我有用于在Google地图中显示信息窗口的代码。问题是它总是在信息窗口中显示相同的数据。对于标记，使用$ scope.result数组没有问题。

 < div id =allesMap> 
< ng-map zoom =9center =[51.2132822,4.4304089]> 
 
< marker ng-repeat-start =x in resultposition ={{x.point_lat}}，{{x.point_lng}}icon =images / wifi.png上点击= showInfoWindow（ 'myInfoWindow'） > 
< info-window id =myInfoWindow> 
< div class =infoWindowTekst> gemeente：{{x.gemeente}}< br> 
 straat：{{x.straat}} {{x.huisnr}}< br> 
< / div> 
< / info-window> 
< / marker> 
 
< marker ng-repeat-end>< / marker> 
< / ng-map> 
< / div> 
  

解决方案

从性能角度来看，创建一个更好的选项信息窗口的单个实例，并根据所选标记显示信息。下面的例子演示了如何完成它：

 < 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 =mapAppng-controller =mapController> < ng-map default-style =truezoom =5center =59.339025，18.065818> < info-window id =myInfoWindow> < div-non-bindable> < H4> {{selectedCity.name}}< / H4> < / DIV> < /信息窗口> < marker ng-repeat =c in citiesposition ={{c.pos}}title ={{c.name}}id ={{c.id}}on-click = showCity（event，c）> < /标记> < / ng-map>< / div>  

$ b

< a href =https://jsfiddle.net/vgrem/7nqg7f7f/ =nofollow> JSFiddle

I have this code for showing a info-window in google maps . The problem is that it always shows the same data in the info window. For the markers it is no problem to use the $scope.result array.

<div id="allesMap">
        <ng-map zoom="9" center="[51.2132822,4.4304089]" >

            <marker ng-repeat-start="x in result" position="{{x.point_lat}},{{x.point_lng}}" icon="images/wifi.png" on-click="showInfoWindow('myInfoWindow')">
                <info-window id="myInfoWindow">
                    <div class="infoWindowTekst"> gemeente: {{x.gemeente}}<br>
                        straat: {{x.straat}} {{x.huisnr}} <br>
                    </div>
                </info-window>
            </marker> 

            <marker ng-repeat-end ></marker>
        </ng-map> 
    </div>

解决方案

From performance perspective it always a better option to create a single instance of info window and display information depending on the selected marker. The following example demonstrates how to accomplish it:

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
        });
        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];
        $scope.showCity = function(event, city) {
            $scope.selectedCity = city;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };

    });

<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">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        <info-window id="myInfoWindow">
            <div ng-non-bindable>
                <h4>{{selectedCity.name}}</h4>
            </div>
        </info-window>
        <marker ng-repeat="c in cities"
                position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
        </marker>
    </ng-map>

</div>

JSFiddle

这篇关于在angularjs中用ng-map显示多个信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！