Question

为什么我无法在marker current上指出location。 marker指向其他地方。

这是截图：

下面是我的完整代码：

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


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';        

@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {


  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {

    this.mapHandler2();       
  }

  mapHandler2(){


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

     let map: GoogleMap = this.googleMaps.create(element);

     let LatLang: LatLng = new LatLng(43.0741904,-89.3809802); 


          // create CameraPosition 
       let position: any = {
          target: LatLang,    
          zoom: 18,
          tilt: 30
       };     


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');
         // Now you can add elements to the map like the marker
        //   map.moveCamera(position);

         // create new marker
        let markerOptions:any = {
            position: LatLang,
            title: 'Ionic'
        };

        const marker:any = map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.showInfoWindow();
            });


         this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);


               map.setCameraTarget(LatLang);
               map.setCameraZoom(18);

                let defPosition: any = {
                    target: LatLang,    
                    zoom: 18,
                    tilt: 30
                 };


                map.moveCamera(defPosition);


                let markerOptions:any = {
                    position: LatLang,
                    title: 'Your Current Location'
                };

                const marker:any = map.addMarker(markerOptions)
                    .then((marker: Marker) => {
                        marker.showInfoWindow();
                  });     


          }, (err) => {
            console.log(err); 
            alert('location error');            
          });

        });

  }

}

认为我没有得到坐标我改变了我的代码，就像下面的代码一样，甚至没有显示谷歌地图

下面是代码:(不显示任何内容）

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


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';      


@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {


  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {

     this.getCurrentLocation();           
  }

  getCurrentLocation(){

             this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);

             this.mapHandler2(LatLang);

          }, (err) => {
            console.log(err); 
            alert('location error');            
          });
  }


  mapHandler2(LatLang){          


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

     let map: GoogleMap = this.googleMaps.create(element);


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');

               let defPosition: any = {
                    target: LatLang,    
                    zoom: 18,
                    tilt: 30
                 };


                map.moveCamera(defPosition);


                let markerOptions:any = {
                    position: LatLang,
                    title: 'Your Current Location'
                };

                const marker:any = map.addMarker(markerOptions)
                    .then((marker: Marker) => {
                        marker.showInfoWindow();
                  }); 




        });

  }

}

Answer 1

嗯，这是Google Maps原生API的错误（我想你使用的是Android）。相机移动后添加标记应该没问题。

尝试这样做（使用@ionic-native/google-maps@4.4.2和import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation'; import { GoogleMaps, GoogleMap, GoogleMapsEvent, ILatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; @IonicPage() @Component({ selector: 'page-google-map-test', templateUrl: 'google-map-test.html', }) export class GoogleMapTestPage { constructor(...,private geolocation : Geolocation) { } ionViewDidLoad() { this.getCurrentLocation(); } getCurrentLocation(){ this.geolocation.getCurrentPosition().then((position) => { let yourPosition: ILatLng = { lat: position.coords.latitude, lng: position.coords.longitude }; this.mapHandler2(yourPosition); }, (err) => { console.log(err); alert('location error'); }); } mapHandler2(yourPosition){ let map: GoogleMap = GoogleMaps.create('map'); map.one(GoogleMapsEvent.MAP_READY).then(() => { console.log('Map is ready!'); let defPosition: any = { target: yourPosition, zoom: 18, tilt: 30 }; map.moveCamera(defPosition).then(() => { let markerOptions:any = { position: yourPosition, title: 'Your Current Location' }; return map.addMarker(markerOptions); }) .then((marker: Marker) => { marker.showInfoWindow(); }); } }）：

<?php
error_reporting(E_ALL); ini_set('display_errors', 1);

$regex = '/<div id=\"Gamerscore\">(.+?)<\/div>/';
$gamertag = 'Stallion83';

try {
    $URL = file_get_contents('http://gamercard.xbox.com/en-US/' . $gamertag . '.card');

    if ($URL == false) {
        echo 'Error!';
    }
} catch (Exception $e) {
    echo $e;
}

preg_match($regex, $URL, $gs);

// Extract integer value from string
$gamerscore = filter_var($gs[1], FILTER_SANITIZE_NUMBER_INT);

// Force gs_int to be integer so it can be used with number_format later
$gs_int = (int)$gamerscore;

$textFile = 'data/gamerscore_' . $gamertag . '.txt';

// Save gamerscore value into everyone's own txt file
file_put_contents($textFile, $gs_int);
?>

Answer 2

要配合wf9a5m75的答案，这是我所拥有的HTML和SCSS。如在以div id作为地图的评论中所说，这对于显示GoogleMap至关重要（请参见mapHandler2函数的第一行代码）。希望它会有所帮助。 HTML：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Location</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic GoogleMaps Demo</h3>
  <div id="map">
  </div>
</ion-content>

SCSS：

page-location {
  #map{
    height: 50%;
  }
}

我的Ionic页面名为Location，因此您可能需要更改scss文件的第一行才能正确反映您的项目。

为什么谷歌地图没有指向我在离子科尔多瓦的当前位置

2 个答案: