集成谷歌地图以获取角度2中的当前位置?

2024-03-01

如何在 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);
     }
    }

}

当我检查浏览器的控制台时,出现“地图”未定义的错误:( -- 已解决。

编辑:我现在想搜索特定位置。我参考了 Google Maps API 文档 。但我没有得到任何结果。知道如何更改我的代码吗?


考虑使用google.maps.places用于搜索。

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

集成谷歌地图以获取角度2中的当前位置? 的相关文章

随机推荐