如何使用角度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知道如何我的代碼已經被改變?
你會在哪一行發現錯誤? –
對於從瀏覽器獲取當前位置,你不需要整合谷歌地圖。這是一個可用於此目的的開源組件https://github.com/tixdo/ng2-location – Satendra
@AlexanderCiesielski我得到了一個錯誤:map:this.map。所以我將它分配給一個名爲self的變量。現在它的工作很好。 – CruelEngine