Google Map zentriert auf dem aktuellen Standort des Benutzers PLUS Standardstandort als Backup

Lauren Mastroni

Mein Store Locator ist so eingestellt, dass er sich auf den aktuellen Standort des Benutzers zentriert, aber wie kann ich ihn auf einen Standort als Standard festlegen, wenn der Benutzer nicht zulässt, dass sein Standort bekannt ist? Der Code in der else-Anweisung funktioniert nicht, aber ich bin mir nicht sicher, warum. Hier ist was ich habe:

google.maps.event.addDomListener(window, 'load', function() {

(function() {

  if(!!navigator.geolocation) {

      var map;

      var mapOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      navigator.geolocation.getCurrentPosition(function(position) {

          var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

          map.setCenter(geolocate);

      });

  } else {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }

  var panelDiv = document.getElementById('panel');

  var data = new MedicareDataSource;

  var view = new storeLocator.View(map, data, {
    geolocation: false,
    features: data.getFeatures()
  });

  new storeLocator.Panel(panelDiv, {
    view: view
  });

})();
});
Geocodezip

Der Code im else funktioniert nicht, weil er nie ausgeführt wird ( !!navigator.geolocationist true). Wenn geolocationverfügbar ist, aber ein Fehler auftritt, wird die errorFunktion aufgerufen, aber Sie haben keine definiert.

Die Methode getCurrentPosition ist definiert als (aus der Dokumentation ):

navigator.geolocation.getCurrentPosition(success[, error[, options]])
Parameter
success - Eine Callback-Funktion, die ein Positionsobjekt als einzigen Eingabeparameter verwendet.
error – Optional – Eine optionale Callback-Funktion, die ein PositionError-Objekt als einzigen Eingabeparameter verwendet.
options – Optional – Ein optionales PositionOptions-Objekt.

Fügen Sie eine Fehlerfunktion hinzu, um den Mittelpunkt der Karte festzulegen:

function error(err) {
  console.log('ERROR('+err.code+'): '+err.message);
  if (map && map.setCenter) map.setCenter(new google.maps.LatLng(37.7749, -122.4194))
};

Fügen Sie es dann dem .getCurrentPositionAnruf hinzu:

  navigator.geolocation.getCurrentPosition(function(position) {
    var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(geolocate);
  }, error);

Proof of Concept Geige (https: funktioniert)
Proof of Concept Geige (http: scheitert an unsicherer Herkunft)

Code-Auszug:

var map;

function error(err) {
  console.log('ERROR(' + err.code + '): ' + err.message);
  if (map && map.setCenter) map.setCenter(new google.maps.LatLng(37.7749, -122.4194))
};

google.maps.event.addDomListener(window, 'load', function() {

  if (!!navigator.geolocation) {

    var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(geolocate);
    }, error);

  } else {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }
});
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

Google Maps - zentriert auf den Standort des Benutzers

Polylinien in Mapview basierend auf dem aktuellen Standort des Benutzers zeichnen?

Anzeigen von Feldern basierend auf dem aktuellen Standort des Benutzers in Microsoft Power BI

Die Kamera folgt nicht dem aktuellen Standort des Benutzers in Google Maps

Zeichnen von MKPolyline, die dem aktuellen Standort des Benutzers folgt

MapKit-Zoom auf den aktuellen Standort des Benutzers

Google Maps, wenn kein Standort Marker auf Standardstandort setzt

Google Maps API - Karte auf dem aktuellen Standort des Kunden zentrieren

Aktuellen Standort des Benutzers abrufen - Kotlin

Routenrichtung zwischen dem aktuellen Standort des Benutzers und dem Ziel in der iOS-App zeichnen?

In Google Map mit Pinch zum Vergrößern und Verkleinern mit dem aktuellen Standort als Mittelpunkt der Karte

Stellen Sie Google Map auf den aktuellen Standort ein

Festlegen der Karte zusammen mit dem aktuellen Standort des Benutzers für osx

JavaScript Google Maps API - Im Mittelpunkt steht der Standort des Benutzers, auf dem keine Karte geladen wird

Was ist der einfachste und robusteste Weg, um den aktuellen Standort des Benutzers auf Android zu ermitteln?

Was ist der einfachste und beste Weg, um den aktuellen Standort des Benutzers auf Android zu ermitteln?

SwiftUI-Mapkit setzt die Region auf den aktuellen Standort des Benutzers

Android Maps - Wie zentriere ich die Karte automatisch auf den aktuellen Standort des Benutzers?

So fokussieren Sie die Google Maps-Kamera beim Start mithilfe von SwiftUI-Ansichten auf den aktuellen Standort des Benutzers

Entfernung des Standortes des Benutzers von meinem aktuellen Standort

Erstellt einen Tween-Standort basierend auf dem aktuellen Standort

SwiftUI: Wie erhalte ich den aktuellen Standort des Benutzers?

Fehler beim Versuch, den aktuellen Standort des Benutzers in Dialogflow abzurufen

So erhalten Sie den aktuellen Standort des Benutzers in Android

Aktuellen Standort des Benutzers automatisch in eine SMS aufnehmen (Swift)

Wie kann ein Datenbankobjekt basierend auf dem Standort / der Nähe zum Standort des Benutzers effizient überprüft werden?

Wie stelle ich die Sprache basierend auf dem Standort des Benutzers ein?

So senden Sie eine Benachrichtigung basierend auf dem Standort des Benutzers oneSignal

iOS zeigt Push-Benachrichtigungen basierend auf dem Standort des Benutzers an

TOP Liste

  1. 1

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  2. 2

    Wie füge ich mehrere Spalten in einer Spalte mit derselben Tabelle in SQL Server zusammen?

  3. 3

    Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

  4. 4

    Ich kann nicht verstehen, wie man Go-Code in mehreren Dateien kompiliert

  5. 5

    Zählen Sie die Vorkommen jedes Werts in einem Tupel in Python

  6. 6

    Gibt es eine sauberere Möglichkeit, Konstruktorargumente und Instanzeigenschaften einer Klasse in Typescript zu definieren?

  7. 7

    So implementieren Sie Pushwoosh mit ionic 2

  8. 8

    Wie wird der Wert im Dropdown-Menü basierend auf den ausgewählten Daten / IDs angezeigt?

  9. 9

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  10. 10

    Ändern Sie den Knotenpfad in das aktuelle Verzeichnis

  11. 11

    So erstellen Sie ein Array von Objekten aus zwei Arrays von Objekten mit einem gemeinsamen Schlüssel - JavaScript

  12. 12

    Rufen Sie die ID aus der Datagrid-Ansicht ab und zeigen Sie die Daten in Textfeldern einem anderen Formular an

  13. 13

    base js: Wie füge ich einem Objekt eine Eigenschaft auf die 'alte' Weise hinzu?

  14. 14

    Ersetze einen Teil einer Zeichenfolge durch eine Pandas-Spalte als Muster

  15. 15

    Blättern Sie auf Radio Click zur Abschnitts-ID

  16. 16

    CBCentralManager wird nach dem Verbinden neu gestartet

  17. 17

    Scherz, wie man eine Funktion verspottet, die von einer verspotteten Funktion zurückgegeben wird

  18. 18

    django-allauth Empfängersignal zum Hinzufügen einer Gruppenberechtigung zum Benutzer bei der Anmeldung

  19. 19

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  20. 20

    AQL: Teilweise Übereinstimmung in einer Reihe von Zeichenfolgen

  21. 21

    So summieren Sie die Werte zweier Tabellen und gruppieren sie nach Datum

heißlabel

Archiv