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>

地图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服务之前声明承诺得到解决，否则通常会发生MarkersParentModel: no valid models attribute found或Cannot read property 'gManager' of undefined错误

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

3）click指令的ui-gmap-markers属性的正确表达式语法为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

Answer 2

对我来说很简单，添加 $ timeout 可以解决我的问题

这就是问题

    $timeout(function () {
            $scope.map = {
              /* here all the map object */
            }
       }, 200);

然后修复。

在角谷歌地图中显示标记信息的错误

2 个答案: