2016-11-15 42 views
3

如何使用角度2中的Google地圖API獲取當前位置?我已將Google地圖包含在我的應用程序中。現在我想捕獲當前位置我已經附加了我的代碼。請幫我集成Google地圖以獲取角度2中的當前位置?

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

} 

我得到一個錯誤的「地圖」當我檢查瀏覽器的控制檯:(未定義 - 解決

編輯:我現在要搜索一個特定位置我已經提到谷歌地圖API文檔,但我沒有results.Any知道如何我的代碼已經被改變?

+0

你會在哪一行發現錯誤? –

+0

對於從瀏覽器獲取當前位置,你不需要整合谷歌地圖。這是一個可用於此目的的開源組件https://github.com/tixdo/ng2-location – Satendra

+1

@AlexanderCiesielski我得到了一個錯誤:map:this.map。所以我將它分配給一個名爲self的變量。現在它的工作很好。 – CruelEngine

回答