Question

我有一个用ionic创建的项目。在这里，我有一个带有地方搜索框的谷歌地图。

我已经包含了Google地图库，如下所示：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SOMEKEY&libraries=places" defer></script>

现在在我的TypeScript代码中，我有以下

// init the google map
initMap() {
    var centerOfMap;
    var draggableMarker = false;
    this.mapHasBeenInitialized = true;


    this.isStaticLocation = false;
    centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
    draggableMarker = true;

    var options = {
        center: centerOfMap,
        zoom: 11,
        fullscreenControl: false,
        disableDefaultUI: true, // dont allow default zoom/sattelite/street view
        gestureHandline: 'cooperative' // disable moving map with one finger
    };

    this.map = new google.maps.Map(this.googleMap.nativeElement, options);
    this.marker = new google.maps.Marker({
        position: centerOfMap,
        map: this.map,
        draggable: draggableMarker
    });

    if(!this.isStaticLocation) {
        var searchBox = new google.maps.places.SearchBox(this.googleInput.nativeElement);
        // add the searchbar to the google map
        this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.googleInput.nativeElement);

        // Bias the SearchBox results towards current map's viewport
        this.map.addListener('bounds-changed', () => {
            searchBox.setBounds(this.map.getBounds());
        });

        searchBox.addListener('places_changed', () => {
            var places = searchBox.getPlaces();

            if(places.length == 0) {
                return;
            }

            var bounds = new google.maps.LatLngBounds();
            places.forEach(place => {
                if(!place.geometry) {
                    console.log("returned place contains no geometry");
                    return;
                }
                this.setMarkerLocation(place);

                if(place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extends(place.geometry.location);
                }
            });            
            this.map.fitBounds(bounds);
        });
    }

    if(draggableMarker) {
        google.maps.event.addListener(this.marker, 'dragend', (event)=>{
            this.getMarkerLocation();
        });    
    }

    google.maps.event.addListener(this.map, 'click', (event: any)=> {
        var clickedLocation = event.latLng;
        this.marker.setPosition(clickedLocation);
        this.getMarkerLocation();
    });

    // neccessary for reload. Made async to trick loading process
    setTimeout(()=> {
        google.maps.event.trigger(this.googleMap.nativeElement, 'resize');
        this.map.setCenter(centerOfMap);
    }, 100);
}

// function to set the location marker on a different spot
setMarkerLocation(place: any) {
    this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        position: place.geometry.location,
        map: this.map,
        draggable: true
    });
    this.getMarkerLocation();
}

getMarkerLocation() {
    var currLoc = this.marker.getPosition();
    this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
    this.locationChanged = true;
}

这段代码就像浏览器和Android上的魅力一样。基本上代码所做的就是当有人在地图上点击时，标记位置会改变到他们的点击位置。

当某人搜索地点时，地点下拉列表将显示在地图上。在Android上，当您点击此下拉列表中的某个位置时，标记将转到所选位置（f.e. australia）。

然而，在iOS上，标记会将自己定位在人物点击的位置，并完全忽略地点下拉菜单上的点按。

因此，当我在欧洲并输入“澳大利亚”并从我的下拉列表中选择“澳大利亚”时，在Android上我会去澳大利亚，但在iOS上，我会留在欧洲的某个地方，无论下拉的位置如何。

iOS - 谷歌地图地图onclick与地图onclick冲突

0 个答案: