Ionic 3中拖拽地图标记后获取经纬度位置的实现方法

作为Ionic新手，你之前找的教程可能因为版本兼容或者配置细节没到位导致失败，我整理了一套针对性的实现步骤，亲测适合Ionic 3环境：

一、先搞定基础依赖与配置 #

Ionic 3基于Angular 5，所以我们用适配的Angular Google Maps（AGM）库来实现地图功能，配合你已经在用的Geo-location插件：

1. 安装指定版本的AGM（最新版本不兼容Angular 5）：

npm install @agm/core@1.1.0 --save

2. 在app.module.ts中配置AGM模块，填入你的谷歌地图API密钥（要确保在谷歌云平台启用了Maps JavaScript API）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
// 导入AGM模块
import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // 配置AGM
    AgmCoreModule.forRoot({
      apiKey: '你的谷歌地图API密钥',
      libraries: ['places'] // 可选，若需要地点搜索功能则添加
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp]
})
export class AppModule {}

二、编写地图页面的代码 #

假设你有一个MapPage，我们在这个页面里实现地图、可拖拽标记和位置获取：

1. HTML模板（map.html） #

<ion-header>
  <ion-navbar>
    <ion-title>可拖拽地图标记</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- AGM地图组件，初始化到当前位置 -->
  <agm-map 
    [latitude]="currentLat" 
    [longitude]="currentLng" 
    [zoom]="15"
    style="height: 60vh; width: 100%;">
    
    <!-- 可拖拽标记，绑定拖拽结束事件 -->
    <agm-marker 
      [latitude]="markerLat" 
      [longitude]="markerLng" 
      [draggable]="true"
      (dragEnd)="onMarkerDragEnd($event)">
    </agm-marker>
  </agm-map>

  <!-- 显示标记当前位置 -->
  <div class="location-info" padding>
    <h4>标记位置信息</h4>
    <p><strong>纬度:</strong> {{ markerLat | number: '1.6-6' }}</p>
    <p><strong>经度:</strong> {{ markerLng | number: '1.6-6' }}</p>
  </div>
</ion-content>

2. TypeScript逻辑（map.ts） #

这里我们用Geo-location插件获取初始位置，同时处理标记拖拽结束后的位置更新：

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

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  currentLat: number;
  currentLng: number;
  markerLat: number;
  markerLng: number;

  constructor(
    public navCtrl: NavController,
    private geolocation: Geolocation
  ) {}

  ionViewDidLoad() {
    // 页面加载时获取当前位置，初始化地图和标记
    this.geolocation.getCurrentPosition({
      enableHighAccuracy: true, // 开启高精度定位
      timeout: 10000,
      maximumAge: 0
    }).then(resp => {
      // 成功获取位置，赋值给地图和标记
      this.currentLat = resp.coords.latitude;
      this.currentLng = resp.coords.longitude;
      this.markerLat = this.currentLat;
      this.markerLng = this.currentLng;
    }).catch(error => {
      console.error('获取当前位置失败:', error);
      // 获取失败时设置默认位置（比如北京）
      this.currentLat = 39.9042;
      this.currentLng = 116.4074;
      this.markerLat = this.currentLat;
      this.markerLng = this.currentLng;
    });
  }

  // 标记拖拽结束时触发，获取新位置
  onMarkerDragEnd(event) {
    // event.coords包含标记的新纬度和经度
    this.markerLat = event.coords.lat;
    this.markerLng = event.coords.lng;
    console.log('标记更新后的位置:', this.markerLat, this.markerLng);
    // 这里可以把位置存储到本地、发送到服务器等
  }
}

三、关键注意事项（新手容易踩坑的点） #

• API密钥配置：一定要在谷歌云平台启用Maps JavaScript API，并且确保密钥没有设置错误的域名/应用限制（测试阶段可以暂时关闭限制）
• 版本兼容：Ionic 3必须用@agm/core@1.1.0，更高版本不支持Angular 5
• 真机测试：浏览器的地理定位可能不稳定，建议用Android/iOS真机测试，记得给应用授予定位权限
• 权限配置：如果用原生Geo-location插件，确保config.xml里已经添加了权限：

<plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
<feature name="Geolocation">
  <param name="android-package" value="org.apache.cordova.geolocation.GeoBroker" />
</feature>

按照这个步骤来，应该就能顺利实现可拖拽标记并获取位置了。

内容的提问来源于stack exchange，提问作者Aaden Sah metalhead101