Question

我想将数据库中存储的位置显示到谷歌地图中。下面的代码包含函数initializeMap（），它显示当前位置，还包含另一个获取存储位置的函数：

＆＃13;

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();
    }




}

＆＃13;

存储位置在虚假位置出现在地图上的问题。请问是什么问题？

Answer 1

你的问题在这一行：

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

您的经纬度值是错误的。如果您read the documentation，并且顾名思义，它会告诉您它应该是latitude，然后是longitude。当你进一步向下创建几行时，你自己正确地做到了。

应该是：

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

将存储的位置显示到谷歌地图中

1 个答案: