Question

我有一个带有标记和信息框的谷歌地图，当用户点击地图时，会显示有关位置的信息。我给了事件onclick以这种方式创建信息框。现在我需要在加载地图而不是onclick时最初加载信息框。我写了一个没有加载的代码。请帮忙。

$scope.map = {
            center: {
                latitude: 0,
                longitude: 0
            },
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            control: {}
        };

        // place a marker
        $scope.markers = [];

        function setMarker(lat, long, title, content) {
            var marker = {
                id: $scope.markers.length+1,
                coords: {
                    latitude: lat,
                    longitude: long
                },
                options: {
                    title: title,
                    icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
                },
                events: {
                    click: function(marker, eventName, args) {
                        // close window if not undefined
                        var infoWindow;
                        if (infoWindow !== void 0) {
                            infoWindow.close();
                        }
                        // create new window
                        var infoWindowOptions = {
                            content: content
                        };
                        infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                        infoWindow.open($scope.map, marker);
                    }
                }
            };
            $scope.markers.push(marker);
        };

on onload map的新代码如下，我在click事件上替换了这段代码。

window.onload = function(e){ 

 var infoWindow;
if (infoWindow !== void 0) {
    infoWindow.close();
}
// create new window
var infoWindowOptions = {
    content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open($scope.map, marker);

}

Answer 1

以下示例（Info windows sample的修改版本）演示了如何在加载地图后打开信息窗口

＆＃13;

angular.module('mapApp', [])

    .controller('mapCtrl', ['$scope', function ($scope) {

        $scope.map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -25.363, lng: 131.044 },
            zoom: 4
        });


        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
            '<div id="bodyContent">'+
            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
            'sandstone rock formation in the southern part of the '+
            'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
            'south west of the nearest large town, Alice Springs; 450&#160;km '+
            '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
            'Aboriginal people of the area. It has many springs, waterholes, '+
            'rock caves and ancient paintings. Uluru is listed as a World '+
            'Heritage Site.</p>'+
            '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
            'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
            '(last visited June 22, 2009).</p>'+
            '</div>'+
            '</div>';

        $scope.infoWindow = new google.maps.InfoWindow({
          content: contentString
        });
        
        $scope.marker = new google.maps.Marker({
          position: {lat: -25.363, lng: 131.044},
          map: $scope.map,
          title: 'Uluru (Ayers Rock)'
        });
        $scope.marker.addListener('click', function() {
          $scope.infoWindow.open($scope.map, $scope.marker);
        });
        $scope.infoWindow.open($scope.map,$scope.marker); 
        


    }]);

＆＃13;

#map 
{
    height: 480px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="mapApp"  ng-controller="mapCtrl" >
  <div id="map"></div>
</div>

＆＃13;

用于地图上传的信息框。

1 个答案: