Добавление маркера в пожарный магазин с помощью листовки - PullRequest
Новая
       12

Добавление маркера в пожарный магазин с помощью листовки

0 голосов
/ 02 октября 2018

Предполагается, что весь приведенный ниже код добавляет маркер на карту, основанный на входном адресе, и передает широту и долготу в пожарное депо и возвращает его обратно.в коде нет ошибок, но маркер не будет отображаться, и в пожарном хранилище нет никаких данных, мне действительно нужно как можно больше помощи, я застрял здесь уже две недели, и янадеясь на вашу доброту воссоздать ситуацию.примечание: это будет работать только или предполагается на эмуляторе.

Установить буклет 

npm install leaflet --save

Добавить в index.html 

<link href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

Map.html 

<ion-header>

  <ion-navbar>
    <ion-title>map</ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="addMarker()">
        <ion-icon name="md-locate"></ion-icon>
      </button>
     </ion-buttons> 
  </ion-navbar>

</ion-header>


<ion-content>
  <div id="map" style="width:100%; height:100%;"></div>
</ion-content>

Map.ts 

import leaflet from 'leaflet';
import { NativeGeocoder, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';
import { MarkersProvider } from "../../providers/markers/markers";

@ViewChild('map') mapContainer: ElementRef;
map: any;
public eName: string;
constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController,private nativeGeocoder: NativeGeocoder, public markersProvider: MarkersProvider) {
//this.eName = this.navParams.get('eName');
}

ionViewDidEnter() {
  this.loadmap();
}

loadmap() {
  this.map = leaflet.map("map").fitWorld();
  leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attributions: 'Cavalry',
    maxZoom: 14
  }).addTo(this.map);
// this.loadMarkers();
this.map.locate({
  setView: true,
  maxZoom: 10
}).on('locationfound', (e) => {
  let markerGroup = leaflet.featureGroup();
  let marker: any = leaflet.marker([e.latitude, e.longitude]).on('click', () => {
    alert('You are here!');
  })
  markerGroup.addLayer(marker);
  this.map.addLayer(markerGroup);
  }).on('locationerror', (err) => {
    alert(err.message);
  });
}

addMarker() {
  let prompt = this.alertCtrl.create({
    title: 'Add Marker',
    message: "Enter Adress",
    inputs: [
      {
        name: 'Address',
        placeholder: 'City'
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Save',
        handler: data => {

          this.geoCodeandAdd(data.address);

        }
      }
    ]
  });
  prompt.present();
}

geoCodeandAdd(address) {
  this.nativeGeocoder.forwardGeocode(address)
    .then((coordinates: NativeGeocoderForwardResult[]) => {

leaflet.marker([parseFloat(coordinates[0].latitude), parseFloat(coordinates[0].longitude)]).on('click', () => {


    this.markersProvider.saveMarker(coordinates[0]);
  })

.catch((error: any) => console.log(error));
}

loadMarkers() {
  this.markersProvider.getAllMarkers().subscribe((markers: any) => {
    markers.forEach((singlemarker) => {
      let markerGroup = leaflet.featureGroup();

      let marker: any = leaflet
        .marker([parseFloat(singlemarker.latitude),     parseFloat(singlemarker.longitude)])
        .on("click", () => {
          alert(singlemarker.message);
        });
      markerGroup.addLayer(marker);
      this.map.addLayer(markerGroup);
    });
  });
}

Создание маркеров имени поставщика, добавление и импорт MarkersProvider к поставщику в app.module.ts 

npm g provider markers

Maker.ts 

import { Injectable } from '@angular/core';
import { AngularFirestore } from "angularfire2/firestore";

@Injectable()
export class MarkersProvider {
  constructor(private afs: AngularFirestore) {

  }

  saveMarker(coords) {
    this.afs
      .collection('markers')
      .add({
        latitude: coords.latitude,
        longitude: coords.longitude,
        message: "hello",
      })
      .then(() => {
        alert('Added');
      });
  }

  getAllMarkers() {
    return this.afs.collection('markers').valueChanges();
  }
}

Сейчас я действительно на грани, надеюсь, вы, ребята, можете мне помочь, и спасибо за ваше время.

...