Question

我目前有一个带有地方选择框的谷歌地图。

我目前在地图上有一个(click)绑定，当点击某个位置时，会在该位置放置一个标记。

现在我还有一个带有地点的输入字段，以便您可以搜索特定区域。现在的问题是，当您搜索某个地点，然后按下该位置时，将不会选择该地点，而是会在您点按的区域显示一个标记。

（看起来像z-index问题，但输入实际上在地图上方）。

此问题仅发生在iOS设备上。 Android和Windows正常运行

修改：设置.pac-container { z-index: 999999 !important; }

代码：

HTML

<input *ngIf="!isStaticLocation" type="text" class="controls" #pacInput placeholder="Search Box"/>
<div #googleMap id="map" style="width: 100%; height: 300px;"></div>

TS（简体）

// init the google map
initMap() {
    var centerOfMap;
    var draggableMarker = true;

    centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);

    var options = {
        center: centerOfMap,
        zoom: 11,
        fullscreenControl: false,
        disableDefaultUI: true, // dont allow default zoom/sattelite/street view
        gestureHandline: 'cooperative' // disable scrolling conflict of the page
    };

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

    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);
    });

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

// 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();
}

// updates configuration of the app.
getMarkerLocation() {
    var currLoc = this.marker.getPosition();
    this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
    this.locationChanged = true;
}

Google地图位置选择与iOS

0 个答案: