2016-11-15 2 views
3

Как использовать API Google Maps в угловом 2, чтобы получить текущее местоположение? Я включил карту 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); 
    } 
    } 

} 

Я получаю сообщение об ошибке, как «карта» не определено, когда я проверить консоль браузера :(- решаемые

Edit:.. Теперь я хочу, чтобы искать в конкретном месте я имею упоминается API Карт Google Docs Но я не получил ни малейшего представления о том, как results.Any мой код должен быть изменен ??

+0

На какой линии вы получаете эту ошибку? –

+0

Для получения текущего местоположения из браузера вам не нужно интегрировать карты Google. Для этого существует компонент с открытым исходным кодом https://github.com/tixdo/ng2-location – Satendra

+1

@AlexanderCiesielski i получил ошибку в строке: map: this.map. Поэтому я назначил это переменной с именем self. теперь его работает Прекрасно. – CruelEngine

ответ

Смежные вопросы