顯示存儲位置到谷歌地圖

我想顯示從數據庫存儲位置成谷歌地圖下面.The代碼包含功能initializeMap（），它顯示當前的位置也是它包括另一功能，獲取所存儲的位置：顯示存儲位置到谷歌地圖

import { Component, ViewChild, ElementRef } from '@angular/core'; 
 
import { NavController, Platform } from 'ionic-angular'; 
 
import { Geolocation } from '@ionic-native/geolocation'; 
 
import { VoitureService } from '../../providers/voitureservice'; 
 
declare var google; 
 
declare var document; 
 
@Component({ 
 
    selector: 'page-geolocalisation', 
 
    templateUrl: 'geolocalisation.html', 
 
    providers: [VoitureService] 
 
}) 
 
export class GeolocalisationPage { 
 
    @ViewChild('map') mapElement: ElementRef; 
 
    map: any; 
 
    loader: any; 
 

 

 
    lon: any; 
 
    lat: any; 
 
    itemsGeo: any; 
 
    //platform:Platform; 
 
    constructor(public voitureservice: VoitureService, public platform: Platform, public navCtrl: NavController, public geolocation: Geolocation) { 
 
     this.platform = platform; 
 
    } 
 

 
    ionViewDidLoad() { 
 
     this.initializeMap(); 
 

 
    } 
 
    addInfoWindow(marker, content) { 
 

 
     let infoWindow = new google.maps.InfoWindow({ 
 
      content: content 
 
     }); 
 

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

 
    } 
 
    getArrets() { 
 
     this.voitureservice.getAllPositions().subscribe(response => { 
 
      this.itemsGeo = response.geo; 
 
      // this.loader.dismiss(); 
 

 
      for (var i = 0, length = this.itemsGeo.length; i < length; i++) { 
 
       let data = this.itemsGeo[i], 
 
        posi = new google.maps.LatLng(data.longitude.valueOf(), data.latitude.valueOf()); 
 
       let contentadr = data.description + " " + data.pause; 
 

 

 
       // Creating a marker and putting it on the map 
 
       //var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 
       let marker = new google.maps.Marker({ 
 
        position: posi, 
 
        map: this.map, 
 
        title: data.description + " " + data.pause, 
 
        icon: 'assets/icon/beachflag.png' 
 

 
       }); 
 
       this.addInfoWindow(marker, contentadr); 
 
      } 
 
     } 
 
     ); 
 
    } 
 

 
    initializeMap() { 
 

 

 
     // this.presentLoading(); 
 
     this.platform.ready().then(() => { 
 
      var minZoomLevel = 6; 
 
      this.geolocation.getCurrentPosition().then((position) => { 
 

 
       let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
 

 
       this.lon = position.coords.longitude; 
 
       this.lat = position.coords.latitude; 
 

 

 
       this.map = new google.maps.Map(document.getElementById('map'), 
 
        { 
 
         zoom: minZoomLevel, 
 
         center: latLng, 
 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
 

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

 
       let content = "<h4>Je suis ici!</h4>"; 
 

 
       this.addInfoWindow(marker, content); 
 

 
      }); 
 

 

 
     }); 
 
     //getting positions 
 
     this.getArrets(); 
 
    } 
 

 

 

 

 
}

存儲位置在一個虛假的現在的位置。什麼是問題，請在地圖上出現的問題？

來源

2017-06-12 Rami bellili

您的問題是在這條線的位置：

posi = new google.maps.LatLng(data.longitude.valueOf(), data.latitude.valueOf());

你已經得到了緯度和經度值周圍走錯了路。如果您read the documentation，並顧名思義，它告訴你它應該是latitude，然後longitude。當你創建Map幾行後，你就可以正確地做到這一點。

它應該是：

posi = new google.maps.LatLng(data.latitude.valueOf(), data.longitude.valueOf());

來源

2017-06-12 12:35:39 duncan

顯示存儲位置到谷歌地圖

回答

相關問題