使用Ionic 3在地理位置拖动标记后获取位置（纬度和经度）？

Posted 2021-03-28

我正在使用Ionic 3中的Geo-location插件。一切正常但我需要添加一个拖拽标记并获取该标记的位置。我是离子的新手。我搜索了这个，发现很少的链接，但没有运气实现它们

链接：https://forum.ionicframework.com/t/get-location-after-drag-marker-in-google-maps-i-want-updated-lat-long-after-drag-drop-thanks-in-advanced-this-is-my-code/106537

https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

Youtube教程https://www.youtube.com/watch?v=vhVwCZlqIL4

Github链接https://github.com/Aadencoder/Ionic-3-Angular-Google-Maps-API-

Home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: any;
  markers: any;

  establishments = [{
    name: 'Biratnagar',
    lat: 26.4525,
    lng: 87.2718
  }, {
    name: 'Biratnagar',
      lat: 26.7944,
      lng: 87.2718
  }]
  constructor(public navCtrl: NavController, public geolocation: Geolocation, private platform: Platform) {

  }

  ionViewWillEnter(){
    this.platform.ready().then(() => {
      this.initPage();

    })
  }

  initPage(){
    this.geolocation.getCurrentPosition().then(result => {
      this.loadMap(result.coords.latitude, result.coords.longitude);
      console.log(result.coords.latitude);
      console.log(result.coords.longitude);
    })
  }

  loadMap(lat, lng){
    let latLng = new google.maps.LatLng(lat, lng);

    let mapOption = {
      center: latLng,
      zoom: 14,
      mapTypeId:'roadmap',
      disableDefaultUI: true
    }

    let element = document.getElementById('map');

    this.map = new google.maps.Map(element, mapOption);

    let marker = new google.maps.Marker({
      position: latLng,
      title: 'Biratnagar, Janpath-15',
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
    })

    let content = `
      <div id="myId" class="item item-thumbnail-left item-text-wrap">
        <ion-item>
          <ion-row>
            <h6> `+marker.title+`</h6>
            <h6> `+ marker.position +`</h6>
          </ion-row>
        </ion-item>
      </div>
    `
    this.addInfoWindow(marker, content);
    marker.setMap(this.map);

    // this.loadPoints();
  }

  loadPoints(){
    this.markers = [];
     for (const key of Object.keys(this.establishments)){
       let latLng = new google.maps.LatLng(this.establishments[key].lat, this.establishments[key].lng);
       let marker = new google.maps.Marker({
         position: latLng,
         title: this.establishments[key].name
       })
       let content = `
      <div id="myId" class="item item-thumbnail-left item-text-wrap">
        <ion-item>
          <ion-row>
            <h6> `+ this.establishments[key].name + `</h6>
          </ion-row>
        </ion-item>
      </div>
    `
       this.addInfoWindow(marker, content);
       marker.setMap(this.map);
     }
  }

  addMarker(){

  let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
  });

  let content = "<h4>Information!</h4>";         
  this.addInfoWindow(marker, content);

}

  addInfoWindow(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content:content
    })

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    })

  }

}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
      <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
    </ion-buttons> 
  </ion-navbar>
</ion-header>

<ion-content padding>
  Welcome to Google Maps API testing
  <div id="map"></div>


  <ion-input type="file" name="picture"></ion-input>
</ion-content>

的package.json

"@angular/common": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@ionic-native/core": "4.3.2",
"@ionic-native/geolocation": "^4.6.0",
"@ionic-native/google-maps": "^4.6.0",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.2.8",
"ionic-angular": "3.9.2",

答案

map: GoogleMap;
this.map.addMarker({
                title: 'Ionic',
                icon: 'blue',
                animation: 'DROP',
                position: this.map.getCenter()
              })
              .then(marker => {
                marker.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(() => {

                marker.getPosition().then((pos:LatLng) => {
                alert("LAT:" + pos.lat + " LNG:" + pos.lng);
               });

           });
        });

试试吧