Question

伙计我对Angular Google地图的InfoWindows有疑问。正如您从this小提琴（来自this问题）所看到的那样：

信息窗口确实出现在标记的底部 - ＆gt;非常难看它应该出现在顶部（与普通的Google Maps InfoWindow相同）
我想要动态“标题”，因此每个信息窗口应根据标记具有不同的内容 - ＆gt;目前该标记的地址，稍后可能更多。

我已经用谷歌搜索了几个小时，但遗憾的是我无法解决这个问题。任何帮助高度赞赏（因为我认为其他人也有这个问题）：）。

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

myApp.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: '',
        v: '3',
        libraries: 'weather,geometry,visualization'
    });
});

myApp.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
uiGmapGoogleMapApi.then(function (maps) {
    $scope.googlemap = {};
    $scope.map = {
        center: {
            latitude: 37.78,
            longitude: -122.41
        },
        zoom: 14,
        pan: 1,
        options: $scope.mapOptions,
        control: {},
        events: {
            tilesloaded: function (maps, eventName, args) {},
            dragend: function (maps, eventName, args) {},
            zoom_changed: function (maps, eventName, args) {}
        }
    };
});

$scope.windowOptions = {
    show: false
};

$scope.onClick = function (data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
    //alert('This is a ' + data);
};

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

$scope.title = "Window Title!";

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.addMarkerClickFunction($scope.markers);
});

$scope.markers = [{
    id: 0,
    coords: {
        latitude: 37.7749295,
        longitude: -122.4194155
    },
    data: 'restaurant'
}, {
    id: 1,
    coords: {
        latitude: 37.79,
        longitude: -122.42
    },
    data: 'house'
}, {
    id: 2,
    coords: {
        latitude: 37.77,
        longitude: -122.41
    },
    data: 'hotel'
}];

$scope.addMarkerClickFunction = function (markersArray) {
    angular.forEach(markersArray, function (value, key) {
        value.onClick = function () {
            $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

我设置了Plunker点击Markers，其中每个点击infoWindow都有一个不同的angular.module('mapApp', []); angular .module('mapApp') .controller('MapController', MapController); function MapController(){ var map = null; var locations = []; var icon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"; //markers array var markers = {"points" :[ {"name" : "point1", "geo" : { "coordinates" : [ 52.483, 30 ], "type" : "Point" } }, {"name" : "point2", "geo" : { "coordinates" : [ 42.483, 26.084 ], "type" : "Point" } }, {"name" : "point3", "geo" : { "coordinates" : [ 32.483, 16.084 ], "type" : "Point" } } ]}; initMap(); function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: new google.maps.LatLng(32.483, 16.084) }); for (var i = 0; i < markers.points.length; i++) { var currMarker = markers.points[i]; var contentString = 'Name: ' + currMarker.name + '' + 'Type: ' + currMarker.geo.type + '' + 'Lat: ' + currMarker.geo.coordinates[0] + '' + 'Long: ' + currMarker.geo.coordinates[1] + ''; // Converts each of the JSON records into Google Maps Location format (Note [Lat, Lng] format). locations.push({ latlon: new google.maps.LatLng(currMarker.geo.coordinates[1], currMarker.geo.coordinates[0]), message: new google.maps.InfoWindow({ content: contentString, maxWidth: 320 }), username: currMarker.name, type: currMarker.geo.type }); } // Loop through each location in the array and place a geometry locations.forEach(function (n) { console.log(n); var marker = new google.maps.Marker({ position: n.latlon, map: map, icon: icon }); // For each marker created, add a listener that checks for clicks google.maps.event.addListener(marker, 'click', function () { // When clicked, open the selected marker's message n.message.open(map, marker); }); }); } }。

这里是 JS ：

    {
       field: "header",
       hidden: true,
       "menu": false,
       groupHeaderTemplate: "#= data.value #",
    }

我希望我能提供帮助。

angularjs谷歌地图信息窗口

1 个答案: