使用最新标记角 6 重新加载谷歌地图

Question

我可以放置标记并在标记之间绘制折线。它第一次完美运行，当我打开地图时，如果我重新打开地图，它不会加载，除非我们只是放大/缩小

当我重新打开同一张地图时，它会像这样显示

我使用以下代码绘制标记并在标记之间绘制折线

var latLngPath = [];

           var latlng = new google.maps.LatLng(eventLocation.sender.split(",")[0], eventLocation.sender.split(",")[1]);
           // var map = new google.maps.Map(this.gmapElement.nativeElement, {
           //   center: latlng,
           //   zoom: 4
           // });


           var mapProp = {
             center: new google.maps.LatLng(eventLocation.sender.split(",")[0], eventLocation.sender.split(",")[1]),
             zoom: 4
             // mapTypeId: google.maps.MapTypeId.HYBRID // also use ROADMAP,SATELLITE or TERRAIN
           };

           this.eventmap = new google.maps.Map(this.gmapElementevent.nativeElement, mapProp);
           var marker = new google.maps.Marker({ position: mapProp.center });
           marker.setMap(this.eventmap);

           var infowindow = new google.maps.InfoWindow();

           var i;

           for (i = 0; i < locations.length; i++) {
             var latLng = new google.maps.LatLng(locations[i][0].split(",")[0], locations[i][0].split(",")[1]);
             latLngPath.push(latLng);
             marker = new google.maps.Marker({
               map: this.eventmap,
               // data: data['data'],
               position: new google.maps.LatLng(locations[i][0].split(",")[0], locations[i][0].split(",")[1]),
               draggable: false,
               anchorPoint: new google.maps.Point(0, -29)
             });
             google.maps.event.addListener(marker, 'click', (function (marker, i) {

               return function () {
                 var addressLocation;
                 console.log("marker", marker);
                 if (locations[i][0].split(",")[0] === locations[i][1].split(",")[0] && locations[i][0].split(",")[1] === locations[i][1].split(",")[1]) {
                   addressLocation = locations[i][2];
                   var iwContent = '<span> <b>Event Id : </b> <label class="text-primary">' + data['data'].eventExtId + ' <label></span><br />' +
                     '<span> <b>Event Type : </b> <label class="text-primary">' + data['data'].eventType + ' <label></span><br />' +
                     '<span> <b>Event Date : </b> <label class="text-primary">' + eventInformation.eventDateTime1 + ' <label></span><br />' +
                     '<span> <b>Location : </b> <label class="text-primary">' + data['data'].location + ' <label></span>';
                   infowindow.setContent(iwContent);
                   infowindow.open(this.eventmap, marker);
                   marker.setMap(this.eventmap)
                 } else {
                   addressLocation = locations[i][2];
                   var iwContent = '<span> <b>Location : </b> <label class="text-primary">' + addressLocation + '<label></span><br />';
                   infowindow.setContent(iwContent);
                   infowindow.open(this.eventmap, marker);
                   marker.setMap(this.eventmap)
                 }
               }
             })(marker, i));
           }

           var flightPath = new google.maps.Polyline({
             path: latLngPath,
             strokeColor: 'red',
             strokeOpacity: 1,
             strokeWeight: 4,
             zIndex: 300,
             icons: [{
               icon: {
                 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                 strokeColor: 'black',
                 fillOpacity: 1,
                 scale: 3
               },
               repeat: '100px',
               offset: '100%'
             }],
             map: this.eventmap
           });
           flightPath.setMap(this.eventmap);
           var lastLatLng = latLngPath.slice(-1)[0];
           latLngPath = [];
           latLngPath.push(lastLatLng);
           marker.setMap(this.eventmap);

Answer 1

我遇到了类似的问题，可能有出路。您可以按如下方式监听地图空闲事件并触发地图调整大小：

google.maps.event.addListenerOnce(map, 'idle', function(){
     google.maps.event.trigger(map, 'resize');
});

希望这会有所帮助... :)