在 angularjs 中使用 ng-map 显示多个信息窗口 [英] show multiple info-windows with ng-map in angularjs
问题描述
我有此代码用于在 google maps 中显示信息窗口.问题是它总是在信息窗口中显示相同的数据.对于标记,使用 $scope.result 数组没有问题.
<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>斯特拉特:{{x.straat}} {{x.huisnr}}
</信息窗口></标记><标记ng-repeat-end></marker></ng-map>
从性能角度来看,创建信息窗口的单个实例并根据所选标记显示信息总是更好的选择.以下示例演示了如何完成它:
angular.module('mapApp', ['ngMap']).controller('mapController', function($scope, NgMap) {NgMap.getMap().then(function(map) {$scope.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 = 函数(事件,城市){$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-不可绑定><h4>{{selectedCity.name}}</h4>
</信息窗口><marker ng-repeat="c 在城市中"position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)"></标记></ng-map>
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>
这篇关于在 angularjs 中使用 ng-map 显示多个信息窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!