添加标记以表示用户的当前位置

Posted 2023-03-16

【中文标题】添加标记以表示用户的当前位置

【英文标题】：Adding in a marker to represent the current position of the user

【发布时间】：2020-06-14 05:43:53

【问题描述】：

我目前正在使用 angular 和 ionic 4 构建谷歌地图交互式地图。我目前在地图上显示了多个标记，但在试图弄清楚如何添加地理定位和一个标记来表示我的位置时有点脑子放屁。我目前已经实现了 ionic 文档地理定位的代码，但似乎没有做任何事情。有一次我确实得到了地理位置来显示它破坏了地图上其他标记的代码。我在同时实现多个地图标记+地理定位方面没有成功。任何帮助将不胜感激。

import  Geolocation  from '@ionic-native/geolocation/ngx';
import  MarkerDataService  from '../service/marker-data.service';
declare var google;

@Component(
  selector: 'app-all-marker',
  templateUrl: './all-marker.page.html',
  styleUrls: ['./all-marker.page.scss'],
)
export class AllMarkerPage implements OnInit 
  @ViewChild('map',static:true) mapContainer: ElementRef;
  map: any;
  markerData = [];

  constructor(
    private geolocation: Geolocation,
    private markerSerivice: MarkerDataService)  

  ngOnInit() 

    this.geolocation.getCurrentPosition().then((resp) => 

     ).catch((error) => 
       console.log('Error getting location', error);
     );

     let watch = this.geolocation.watchPosition();
     watch.subscribe((data) => 

     );

    this.markerData = this.markerSerivice.getMarkers();
    this.displayGoogleMap();
    this.getMarkers();
  

  displayGoogleMap() 
    const latLng = new google.maps.LatLng(52.175471, -7.162739);

    const mapOptions = 
      center: latLng,
      disableDefaultUI: false,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    ;

    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  

  getMarkers() 
    // tslint:disable-next-line:variable-name
    for (let _i = 0; _i < this.markerData.length; _i++) 
      if (_i > 0) 
        this.addMarkersToMap(this.markerData[_i]);
      
    
  

  addMarkersToMap(marker) 
    const position = new google.maps.LatLng(marker.latitude, marker.longitude);
    const fishingMarker = new google.maps.Marker( position, title: marker.name );
    fishingMarker.setMap(this.map);
  

【参考方案1】：

您可以使用浏览器的 Geolocation HTML5 功能在 Google 地图上显示用户或设备的地理位置。示例实现可以在Maps javascript API documentation.中找到

这可以与 Ionic 4 集成。例如，在您的 displayMap() 函数中，您可以添加这些：

navigator.geolocation.getCurrentPosition(function(position) 
    var pos = 
      lat: position.coords.latitude,
      lng: position.coords.longitude
    ;
    console.log(pos);
    var marker = new google.maps.Marker(
      position: pos,
      map: map,
    );
    map.setCenter(pos);
  );

我希望这会有所帮助！