Question

当显示模态时，我在自举模式上显示谷歌地图，并且我将地图的中心设置为latlong位置：

            $('#result-details-modal').on('shown.bs.modal', (e) => {
                this.canGetAddress = true;
        this.setMapCenter(
                this.selectedResult.result.place.geometry.location.lat(), 
                this.selectedResult.result.place.geometry.location.lng()
            );

                this.resizeMap();
                //this.addMarkersToMap();
                //this.bindAutoCompleteToMap();
            })

地图最初以地图的左上角中纬度和经度（应位于中心）的位置开始。然后当我关闭模态并重新打开它时，latlong位置在地图中正确居中。所以这与时间有关。为什么latlong位置从地图的左上角开始，而不是从中心开始？

这是我的所有相关代码。如果你没有完成角度2，尽量不要被推迟。问题不是关于角度2：

HTML：

<div id="map" #map></div>

的CSS：

#map {
        height: 400px;
        width:400px;

        max-width: none !important; 
        -webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
 -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

    #map > div {
    border-radius: 10px;
    -webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
 -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

    .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

打字稿：

selectedResult;
subscription: Subscription;
@ViewChild('areaInput') areaInput;
@ViewChild('map') mapInput;
map;
autocomplete;
zoom: number = 8;
options = {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13
};
canGetAddress: boolean;

constructor(private resultSelectionService: ResultSelectionService) {
    resultSelectionService.resultSelected$.subscribe(
        result => {
            this.selectedResult = { result };
            $('#result-details-modal').modal('show');

            $('#result-details-modal').on('shown.bs.modal', (e) => {
                this.canGetAddress = true;
        this.setMapCenter(
                this.selectedResult.result.place.geometry.location.lat(), 
                this.selectedResult.result.place.geometry.location.lng()
            );

                this.resizeMap();
                //this.addMarkersToMap();
                //this.bindAutoCompleteToMap();
            })
            console.log(this.selectedResult.result);
        });
}

ngAfterViewInit() {
    this.initMap();
}

resizeMap() {
    google.maps.event.trigger(this.map, "resize");
}

initMap() {
    this.map = new google.maps.Map(document.getElementById('map'), this.options);
    this.resizeMap();
}

setMapCenter(lat: number, lng: number) {
    var myLatLng = {lat: lat, lng: lng};
    this.map.setCenter(myLatLng);
}

Answer 1

解决方案是简单地更改调整地图大小和设置地图中心的顺序。

此：

this.setMapCenter(
        this.selectedResult.result.place.geometry.location.lat(), 
        this.selectedResult.result.place.geometry.location.lng()
);
this.resizeMap();

变为：

this.resizeMap();
this.setMapCenter(
     this.selectedResult.result.place.geometry.location.lat(),
     this.selectedResult.result.place.geometry.location.lng()
);

Google地图上的LatLong位置在bootstrap模式上最初不居中

1 个答案: