Angular 2 Google Map面临的困难 [英] Facing difficulty with angular 2 google map

问题描述

我已使用塞巴斯蒂安(Sebastian)示例创建了Google地图.我可以加载地图.但是我的要求是搜索在搜索框中键入的地点，然后将标记放置在地图上.我也可以搜索该地点，但无法在地图上找到该地点.如果我滚动地图标记会自动出现.下面是我的代码.如果您知道其他方法或其他示例，请提出建议.

I have created google map using Sebastian example. I can able to load the map. But my requirement is to search the places which I type in search box and then it should put the marker in the map. I can able to search the place also, but could not locate it in the map. If I scroll the map marker will come automatically. Below is my code. Suggest me if you know any other way of doing it or any other example.

            <div class="fieldMap">
                    <sebm-google-map 
                    [latitude]="lat"
                    [longitude]="lng"
                    [zoom]="zoom"
                    [disableDefaultUI]="true"
                    [zoomControl]="true"
                    [disableDefaultUI]="false"
                    (mapClick)="mapClicked($event)">

                    <sebm-google-map-marker 
                    *ngFor="let m of markers; let i = index"
                    [latitude]="m.lat"
                    [longitude]="m.lng"
                    [label]="m.label">
                    </sebm-google-map-marker>                   
            </sebm-google-map> 

脚本部分是

  getAddress(place:Object) { 
    this.markers = [];
    var address = this.step1Data.map_address;
    if (!address) return false;
    var geocoder = new google.maps.Geocoder();
    var that = this;

    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            that.lat =  location.lat();
            that.lng = location.lng();
            that.markers.push({
                lat: that.lat,
                lng: that.lng,
                label: 'A',
                draggable: false
            })
        } 
    });
}

推荐答案

问题超时了.如果以后再使用setTimeout推送坐标，它将正常工作.

Problem was with time out. If I push coords with setTimeout later it will work properly.

geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            that.lat = location.lat();
            that.lng = location.lng();
        } else {
            that.step1["gmapError"] = "Geocode was not successful for     the following reason: " + status;
        }
    });

    setTimeout(() => {
            this.markers.push({
                lat: that.lat,
                lng: that.lng,
                label: 'A',
                draggable: false
            });
    }, 100);

这篇关于Angular 2 Google Map面临的困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！