如何用Ionic 2拖動標記的新位置？

Question

朋友;我試圖獲得拖動標記的新位置，但我失敗了。你可以幫我嗎。我無法獲取拖動標記的新位置。

addMarker(){ 
    let marker = new google.maps.Marker({ 
    map: this.map, 
    animation: google.maps.Animation.DROP, 
    position: this.map.getCenter(), 
    draggable: true 
    }); 
     marker.addEventListener(plugin.google.maps.event.MARKER_DRAG_END, function(marker) { 
     marker.getPosition(function(latLng) { 
     marker.setTitle(latLng.toUrlValue()); 
     marker.showInfoWindow(); 
     }); 
     });   
} 

我也試過這個代碼，但它也失敗了：已經安裝了

addMarker(){ 
    let marker = new google.maps.Marker({ 
    map: this.map, 
    animation: google.maps.Animation.DROP, 
    position: this.map.getCenter(), 
    draggable: true 
    }); 
    marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
         data => { 
          marker.getPosition() 
          .then((LatLng) => { 
           alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+LatLng.lat() + ' And Long ~ '+LatLng.lng())         
          }); 
         }); 
} 

套餐：

"dependencies": { 
    "@angular/common": "2.2.1", 
    "@angular/compiler": "2.2.1", 
    "@angular/compiler-cli": "2.2.1", 
    "@angular/core": "2.2.1", 
    "@angular/forms": "2.2.1", 
    "@angular/http": "2.2.1", 
    "@angular/platform-browser": "2.2.1", 
    "@angular/platform-browser-dynamic": "2.2.1", 
    "@angular/platform-server": "2.2.1", 
    "@ionic/storage": "1.1.7", 
    "@types/google-maps": "^3.2.0", 
    "angular2-google-maps": "^0.17.0", 
    "ionic-angular": "2.0.0-rc.4", 
    "ionic-native": "2.2.16", 
    "ionicons": "3.0.0", 
    "promise": "^7.1.1", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "0.6.26" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "0.0.47", 
    "@types/google-maps": "3.2.0", 
    "typescript": "2.0.9" 
    }, 

Answer 1

比較你的依賴關係（的package.json）

"dependencies": { 
    "@angular/common": "2.2.1", 
    "@angular/compiler": "2.2.1", 
    "@angular/compiler-cli": "2.2.1", 
    "@angular/core": "2.2.1", 
    "@angular/forms": "2.2.1", 
    "@angular/http": "2.2.1", 
    "@angular/platform-browser": "2.2.1", 
    "@angular/platform-browser-dynamic": "2.2.1", 
    "@angular/platform-server": "2.2.1", 
    "@ionic/storage": "1.1.7", 
    "ionic-angular": "2.0.0-rc.5", 
    "ionic-native": "2.2.11", 
    "ionicons": "3.0.0", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "0.6.26", 
    "sw-toolbox": "3.4.0" 
    }, 

否則，你可以替換關聯然後去根文件夾並鍵入npm install。 我希望它爲你工作。

Answer 2

你好做你使用ionic plugin add cordova-plugin-googlemaps插件？

然後嘗試添加標記使用以下腳本

let element: HTMLElement = document.getElementById('map'); 
let map = new GoogleMap(element); 

let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.07,-89.38); 
let markerOptions: GoogleMapsMarkerOptions = { 
     position: ionic, 
     title: 'Ionic', 
     draggable: true, 
     icon: 'assets/icon/cusom-marker.png' 
}; 
map.addMarker(markerOptions) 
     .then((marker: GoogleMapsMarker) => { 

      marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_START).subscribe(data =>{ 

      }) 
      marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
        data => { 
         marker.getPosition().then((LatLng) => { 
         alert(JSON.stringify(LatLng)) 
          // alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+LatLng.lat() + ' And Long ~ '+LatLng.lng()) 

         }); 
        }); 
     }); 

希望它爲你工作...

Answer 3

嘗試使用下面的代碼爲我工作。 home.js

import { Component,ElementRef, ViewChild } from '@angular/core'; 
import { NavController, NavParams, ViewController,Platform } from 'ionic-angular'; 
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions,GoogleMapsMarker } from 'ionic-native'; 



@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    @ViewChild('map1') mapElement: ElementRef; 
    map1: any; 
    constructor(public navCtrl: NavController,public platform : Platform, public navParams: NavParams,public viewCtrl: ViewController) { 
    platform.ready().then(() => { 
     this.loadMap(); 
    }); 
    } 

    loadMap() { 
     // create a new map by passing HTMLElement 
     let element: HTMLElement = document.getElementById('map1'); 
     let map1 = new GoogleMap(element); 

     // listen to MAP_READY event 
     map1.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!')); 
     map1.getMyLocation().then((location)=>{ 
     // create LatLng object 
     let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(location.latLng.lat,location.latLng.lng); 
     // create CameraPosition 
     let position: CameraPosition = { 
      target: ionic, 
      zoom: 18, 
      tilt: 30, 
      bearing: 140, 
     }; 

     // move the map's camera to position 
     map1.moveCamera(position); 
      map1.setDebuggable(false) 

     let markerOptions: GoogleMapsMarkerOptions = { 
      position: ionic, 
      // title: 'Ionic', 
      draggable: true, 
      icon: './assets/icon/cusom-marker.png' 
     }; 
     // add circle 
     map1.addCircle({ 
      'center': ionic, 
      'radius': 60, 
      'strokeColor' : '#aec9f2', 
      'strokeWidth': 0, 
      'fillColor' : '#aec9f2' //becfea 
     }); 
     map1.addMarker(markerOptions) 
      .then((marker: GoogleMapsMarker) => { 

       marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_START).subscribe(data =>{ 
       marker.setIcon({ 
        'url': './assets/icon/move-marker.png', 
        'size': { 
        width: 50, 
        height: 50 
        } 
       }); 
       }) 
       marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
         data => { 
          marker.getPosition().then((LatLng) => { 
          // alert(JSON.stringify(LatLng)) 
          marker.setIcon({ 
          'url': './assets/icon/cusom-marker.png', 
          'size': { 
           width: 50, 
           height: 50 
          } 
          }); 
        }); 
       }); 
      }); 

     }) 
    } 
} 

home.html的

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <div #map1 id="map1"> 
    </div> 
</ion-content>