angular - 集成 Google map 以获取 Angular 2 中的当前位置？

Question

我如何在 Angular 2 中使用谷歌地图 API 来获取当前位置？我在我的应用程序中包含了谷歌地图。现在我想捕获我已附加我的代码的当前位置。请帮助我

import { Component,OnInit,ElementRef,ViewChild} from '@angular/core';

// import {searchComponent} from './getLocation.Component';
declare var google: any;

@Component({
    selector: 'map',
    moduleId:module.id,
    templateUrl:'geoCodeMap.component.html',
})

export class mapComponent{
    searchBox:any;
    map:any;
    marker:any;
    accuracy:any;
    @ViewChild('mapDiv') mapDiv:ElementRef;
    options={
       center:{
                lat : 17.555,
                lng : 78.555
            },
    zoom:15,
    mapTypeControl:false,
    MapTypeId: google.maps.MapTypeId.TERRAIN,

    };


    ngAfterViewInit(){
        this.map=new google.maps.Map(this.mapDiv.nativeElement,this.options); 
        this.getLocation();
        this.onSearchResultSelect();
    }      
    getLocation() 
    {
        if (navigator.geolocation) {
            var self = this;
            navigator.geolocation.getCurrentPosition(function(response){
                self.showPosition(response, self);
            }, function() {
            alert("Unable to get GPS Location");
            }, {
            enableHighAccuracy : true
            });
        }
        else {
        alert("Geolocation is not supported by this browser.");
        }
    }



    showPosition(position:any, self:any) {
        var icon = {
        url: "images/home.png",
        scaledSize: new google.maps.Size(30, 30), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0)
    };
    var myLatLng = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
    self.marker = new google.maps.Marker({
        position : myLatLng,
        map:self.map,
        icon:icon,
        draggable : true,
        title : 'Mark Home'
    });

    self.map.panTo(myLatLng);
    self.accuracy = position.coords.accuracy;

    google.maps.event.addListener(self.map, 'dragstart', function() {
    });  
    google.maps.event.addListener(self.map, 'dragend', function() {
    });


    google.maps.event.addListener(self.map, 'center_changed', function() {
    });



    }

 onSearchResultSelect() {
             var self=this;
         var searchMarker:any;
    var input = document.getElementById('pac-input');
    this.searchBox = new google.maps.places.SearchBox(input);
    var button = document.getElementById('button');
    button.onclick = function() {
    input.value='';
    input.focus();
        var places = this.searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }
        if (searchMarker != null) {
            searchMarker.setMap(null);
        }

        var empGeocode = self.map.getCenter().lat() + "," + self.map.getCenter().lng();
        var place = places[0];

        self.map.setCenter(place.geometry.location);
        //container.html(html);
     }
    }

}

当我检查浏览器的控制台时，我收到“ map ”未定义的错误 :( -- 已解决。

编辑:我现在想搜索特定位置。我已经引用了 Google Maps API 文档。但我没有得到任何结果。知道我的代码必须如何更改吗？？

Answer 1

考虑使用 google.maps.places 进行搜索。

在这里查看更多信息:https://developers.google.com/maps/documentation/javascript/places