当没有使用谷歌地图输入地址时，如何设置当前位置

Question

我正在使用谷歌地图API，当没有输入地址并单击按钮时，它必须显示用户的当前位置。 我已经尝试了很多方法，但在这里我得到一个错误，因为 naative 元素未定义。我无法解决此问题。

TS：

getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var mapProp = {
center: new google.maps.LatLng(lat, lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
}
initMap() {
this.mapShow = true;
this.getLocation()
}

.HTML：

<div class="w-100 h-100 border border-primary" #gmap [hidden]="!mapShow"></div>
<a href="javascript:void(0);" (click)="initMap()"><i class="fas fa-map-marker-alt"></i> View on Map</a>

演示： 演示

Answer 1

我能够重现您的问题，并且在 showPosition 回调中似乎"this"为空。我没有使用单独的函数，而是使用了胖箭头语法，该语法允许有效的此引用。这是我用来让它工作的代码。

getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var mapProp = {
center: new google.maps.LatLng(lat, lng),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
});
} else {
alert("Geolocation is not supported by this browser.");
}
}

此外，如果您无法使用胖箭头语法，则可以将"this"分配给全局变量，然后在回调中使用它。