javascript - Angular 谷歌地图中标记信息显示的错误

Question

我真的很困惑如何在单击标记时正确显示信息。我尝试将 $scope.info 放入 onClick 函数中，但它仍然没有显示。

谁能帮我修复这个错误。我对前端没有太多经验

相关 html 文件的一部分:

<div ng-controller="mapCtrl">
 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
    <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show"  options="windowOptions" closeClick="closeClick()">
      <div>{{mapCtrl.info}}</div>
    </ui-gmap-window>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</div>

map Controller .js

projectControllers.controller('mapCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady){
uiGmapGoogleMapApi.then(function (maps) {
        //$scope.googlemap = {};
        $scope.map = {
            center: {
                latitude: 40.1451,
                longitude: -99.6680
            },
            zoom: 4,
            pan: 1,
            options: $scope.mapOptions,
            control: {},
            events: {
                tilesloaded: function (maps, eventName, args) {},
                dragend: function (maps, eventName, args) {},
                zoom_changed: function (maps, eventName, args) {}
            }
        };
    });
    $scope.options = {scrollwheel: false};
    $scope.marker = {
        title: 'Address',
        address: "",
        coords: {
            latitude: 40.1451,
            longitude: -99.6680
        },
        visible: false,
        id: 0
    };
    $scope.windowOptions = {
        show:false
    };

    $scope.onClick = function (data) {
        console.log(data);
        $scope.windowOptions.show = !$scope.windowOptions.show;
        console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
        console.log('Office Name ' + data);
        //alert('This is a ' + data);
    };
    $scope.info = "Bug! Info issue"; // Trying to set in onclick, but it doesn't reflect


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

    uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
        .then(function (instances) {
            console.log(instances[0].map); // get the current map
        })
        .then(function () {
            $scope.markers = [];
            for (var i = 0; i < $scope.addresses.length; i++) {
                $scope.markers.push({
                    id: $scope.markers.length,
                    coords: {
                        latitude: $scope.addresses[i].lat,
                        longitude: $scope.addresses[i].lng
                    },
                    data: $scope.addresses[i].name
                });
            }
            $scope.addMarkerClickFunction($scope.markers);
        });

    $scope.addMarkerClickFunction = function (markersArray) {
        angular.forEach(markersArray, function (value, key) {
            console.log(value);
            value.onClick = function () {
                $scope.info = value.data; //Doesn't seem to take the value here
                $scope.onClick(value.data);
                $scope.MapOptions.markers.selected = value;
            };
        });
    };
    $scope.MapOptions = {
        minZoom: 3,
        zoomControl: false,
        draggable: true,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        disableDoubleClickZoom: false,
        keyboardShortcuts: true,
        markers: {
            selected: {}
        },
        styles: [{
            featureType: "poi",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }, {
            featureType: "transit",
            elementType: "all",
            stylers: [{
                visibility: "off"
            }]
        }],
    };



});

Answer 1

所提供的示例存在一些问题:

1) $scope.markers 需要在 uiGmapIsReady 服务之前声明 promise 正在得到解决，否则通常会发生MarkersParentModel:找不到有效的模型属性或无法读取未定义的属性“gManager”错误

2) 显然表达式 {{mapCtrl.info}} 无效，因为有这样的范围属性初始化为 $scope.mapCtrl.info

3) ui-gmap-markers 指令的 click 属性的正确表达式语法是 click="onClick" 但不是 click="'onClick'"(至少在 angular-google-maps 库版本 2 中)

4) 在大多数情况下，无需为每个标记创建信息窗口实例，因此您可以替换

<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
     <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show"  options="windowOptions" closeClick="closeClick()">
        <div>{{info}}</div>
    </ui-gmap-window>
</ui-gmap-markers> 

与

 <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show"  options="windowOptions" closeClick="closeClick()">
        <div>{{info}}</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" fit="true" events="markers.events">
</ui-gmap-markers>

示例

以下最小示例演示了如何在单击标记时显示信息窗口

var app = angular.module('app', ['uiGmapgoogle-maps']);


app.controller('mapCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

    $scope.markers = [];
    $scope.addresses = [
      {name: 'London',lat: 51.518305,lng: -0.130444},
      {name: 'Paris',lat: 48.856127,lng: 2.352362},
      {name: 'Madrid',lat: 40.431598,lng: -3.704263}
    ];

    $scope.map = {
        center: {
            latitude: 40.1451,
            longitude: -99.6680
        },
        zoom: 10
    };

    $scope.windowOptions = {
        show: false
    };

    $scope.onClick = function (marker, eventName, model) {
        $scope.windowOptions.show = !$scope.windowOptions.show;
        $scope.selectedCoords = model.coords;
        $scope.info = model.data;
    };

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



    uiGmapIsReady.promise() 
        .then(function () {
            for (var i = 0; i < $scope.addresses.length; i++) {
                $scope.markers.push({
                    id: $scope.markers.length,
                    coords: {
                        latitude: $scope.addresses[i].lat,
                        longitude: $scope.addresses[i].lng
                    },
                    data: $scope.addresses[i].name
                });
            }
        });
   
});

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="app" ng-controller="mapCtrl">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
                <ui-gmap-window coords="selectedCoords" show="windowOptions.show"  closeclick="closeClick()">
                        <div>{{info}}</div>
                    </ui-gmap-window>
                <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="onClick" events="markersEvents"  fit="true" >
                </ui-gmap-markers>
            </ui-gmap-google-map>
</div>

Plunker