So fügen Sie Ihrer App mithilfe der Googlemap-API eine Karte hinzu.

Grundsätzlich kann dies durch Schreiben von [Official Document] 1 ~~ entlang der Kopie realisiert werden ~~, aber da ich ein Javascript-Anfänger bin, hat das Entschlüsseln lange gedauert, sodass ich das Gleiche anfangen werde Ich werde es für Sie teilen.

Was du tun kannst

･ Kartenanzeige ･ Anzeige des Suchfeldes ･ Karten- und Suchfelddekoration ezgif.com-gif-maker.gif

Mit einer kleinen Modifikation, Sie können es auch dekorieren. ezgif.com-gif-maker (1).gif

Verfahren

Beschreiben Sie die ID in der HTML-Datei, in der Sie die Karte platzieren möchten
Beschreiben Sie die Web-API in der Javascript-Datei
Spielen Sie mit CSS, um die Karte zu dekorieren

nur das.

Schritt 1: Schreiben Sie die ID in die HTML-Datei, in der Sie die Karte platzieren möchten

Das Folgende ist ein Zitat aus [Offizielles Dokument] 1. Der Punkt besteht darin, Bibliotheken = Stellen im Skript für den API-Aufruf zu beschreiben. Auf diese Weise können Sie die Bibliothek laden, die den Bildschirm in die Such- und Suchposition schaltet.

`sample.html`


<!DOCTYPE html>
<html>
  <head>
    <title>Places Search Box</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    #"Schlüssel=YOUR_Beschreiben Sie den erworbenen API-Schlüssel im Teil "API"
    #Da wir dieses Mal eine Suchfunktion hinzufügen, verwenden wir die Ortsbibliothek, also "Bibliotheken".=Orte “hinzugefügt
    #"V.="Wöchentlich" gibt die Aktualisierungshäufigkeit der Karte selbst an. Wenn nichts beschrieben wird, wird sie einmal vierteljährlich aktualisiert. Mit dieser Beschreibung wird sie wöchentlich aktualisiert, um sie auf dem neuesten Stand zu halten, sodass Sie sie nicht separat beschreiben müssen.
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
  #Zeigen Sie die Karte mit Javascript unter der hier angegebenen ID an.
    <input
      id="pac-input"
      class="controls"
      type="text"
      placeholder="Search Box"
    />
    <div id="map"></div>
  </body>
</html>

Wenn Sie den Browser in diesem Zustand öffnen, werden Sie feststellen, dass nur ein Suchfeld vorhanden ist. Gehen wir zum nächsten.

Schritt 2: Beschreiben Sie die Web-API in der Javascript-Datei

Das Folgende ist auch ein Zitat aus [Offizielles Dokument] 1, aber es dauerte einige Zeit, um herauszufinden, woher die Beschreibung kam. ..

Für Anfänger möchte ich kurz die Beschreibung von js erklären. const ~~ definiert dort eine Konstante "~~". Funktion ~~ ist eine Funktion. google.maps ist ein Objekt, das die Karte selbst angibt.

`index.js`


function initAutocomplete() {
  //Dies ist die Standardeinstellung der Karte.
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13,
    mapTypeId: "roadmap",
  });
  const input = document.getElementById("pac-input");
  const searchBox = new google.maps.places.SearchBox(input);
 ////"SearchBox-Klasse"Ist eine Methode der Places-Bibliothek. Argument wird eingegeben(Das Dokument enthält ein Eingabefeld)。
 ////[https://developers.google.com/maps/documentation/javascript/reference/places-widget#SearchBox]
  
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  ////"ControlPosition"Die Klasse positioniert den Controller.
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/ControlPosition/
  ////https://developers.google.com/maps/documentation/javascript/examples/control-positioning
  
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });
  ////"bound_changed"Die Veranstaltung ist(Zünden, wenn sich der Karten- / Ansichtsport des sichtbaren Bereichs ändert)
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/bounds_changed/ 
  ////"getBounds"Die Methode erhält die Ansichtsfenstergrenze. Kartenklassenmethode.
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/getBounds/
  
  let markers = [];
  searchBox.addListener("places_changed", () => {
  ////"place_chaged"Das Ereignis ist ein Ereignis der AutoComplete-Klasse.
  ////https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed
  
    const places = searchBox.getPlaces();
    ////"getPlaces"Die Methode ist eine Abfrage(Suchbegriff)Ordnen(PlaceResult)Rückkehr mit.
    ////https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed

    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach((marker) => {
      //"forEach"Die Methode ist der Schlüssel des Map-Objekts für die Funktion im Argument/Ordnen Sie Werte der Reihe nach zu und führen Sie Funktionen aus.
        //Kartenobjekt:
          //https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
      marker.setMap(null);
      ////Die setMap-Methode ist Marker(Polyline,Kreis usw.)Unterrichtsmethode. Platzieren Sie den Marker an der angegebenen Position. Wenn das Argument null ist, wird es aus der Karte entfernt.
    });
    markers = [];
    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();
    ////"LatLngBounds"Die Klasse erstellt ein Instrument, das Grenzen schafft. Die Argumente sind die unteren linken und oberen rechten Koordinaten.
    ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/#:~:text=LatLngBounds%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AF%E5%A2%83%E7%95%8C(Bounding,%E4%BD%9C%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
    places.forEach((place) => {
      if (!place.geometry) {
        ////"geometry"Ist eine Methode der Ortsbibliothek.
        
        console.log("Returned place contains no geometry");
        return;
      }
      const icon = {
        url: place.icon,
        ////"icon"Ist ein Objekt, das ein Symbol darstellt. Wenn Sie den Marker zu einem Originalbild machen möchten.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Icon/
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        ////"Point"Die Klasse ist eine Instanzmethode, die die Position von Markierungsbeschriftungen und dergleichen bestimmt.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Point/
        
        scaledSize: new google.maps.Size(25, 25),
      };
      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          icon,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        ////viewport"Methode
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
        ////"union"Die Methode ist eine Methode der LatLngBounds-Klasse. Integriert die angegebene Grenze in ihre eigene Grenze und synthetisiert sie.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/union/
      } else {
        bounds.extend(place.geometry.location);
        ////"extend"Die Methode ist eine Methode der LatLngBounds-Klasse. Fügen Sie Ihren Grenzen neue Positionskoordinaten hinzu.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/extend/
      }
    });
    map.fitBounds(bounds);
    ////"fitBounds"Die Methode ist eine Methode der Map-Klasse. Ändern Sie das Ansichtsfenster so, dass die angegebene Grenze gut sichtbar ist.
    ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/fitBounds/#:~:text=Map.fitBounds()%E3%81%AFMap,%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

  });
}

`style.css`


#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

#target {
  width: 345px;
}

Sie sollten jetzt die Karte und das Suchfeld sehen.

Fühlen Sie sich frei, mit CSS nach Ihren Wünschen zu spielen.

Wenn Sie eine Konstante oder Funktion mit demselben Namen separat schreiben, funktioniert dies nicht gut. Bitte überprüfen Sie im Fehlerfall.

Schritt 3: Spielen Sie mit CSS, um die Karte zu dekorieren

Wenn Sie Schritt 2 verlassen, befindet sich das Suchfeld in einer nicht anspruchsvollen Position. Dekorieren Sie das Feld.

von js Datei

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

Die Position des Suchfelds wurde in TOP_LEFT mit platziert.

Da Javascript nach dem Laden von CSS geladen wird, Es wird durch Überschreiben der Beschreibung von CSS angegeben.

Löschen Sie diese Zeile und dekorieren Sie die ID und Klasse des Eingabe-Tags nach Belieben mit CSS.

Spielen Sie den Kartenstil mit snazzy

Diese Seite namens [snazzy] [4] ermöglicht es Ihnen, intuitiv zu bearbeiten, wie Sie möchten. Der hier ausgewählte oder bearbeitete Stil kann JSON-Daten kopieren, sodass Sie den Stil nach Belieben bearbeiten können, indem Sie ihn unverändert in JS einfügen.

Nur mit Snazzy zu spielen macht Spaß, also schauen Sie bitte. [4]:https://snazzymaps.com/editor/customize/21

Übrigens ist der am Anfang des Artikels eingefügte lila Kartenstil wie folgt.

`input.js`


const map = new google.maps.Map(document.getElementById("map"), opts);
var opts = {
    zoom: 15,
    center: { lat: -33.8688, lng: 151.2195 },
    styles: [
      //Alle Etiketten ausblenden
      {
        featureType: 'all',
        elementType: 'labels',
        stylers: [
          {visibility: 'off'},
        ],
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [
          {visibility: 'on'},
        ],
      },
      //poi=Zeigen Sie nur das Symbol "Sehenswürdigkeiten, Einrichtungen usw." erneut an
      {
        featureType: 'poi',
        elementType: 'labels.icon',
        stylers: [
          {visibility: 'inherit'},
        ],
      },
      //Passen Sie die Farbe der gesamten Karte an
      //Einheitliche Grundfarbe zu Rot+Entsättigt
      {
        featureType: 'all',
        elementType: 'all',
        stylers: [
          {hue: '#5f0285'},
          {saturation : -50},
        ],
      }
    ]

das ist alles. Wenn es nicht funktioniert, folgen Sie bitte der offiziellen Dokumentation.

[Für Anfänger] Anzeigen von Karten und Suchfeldern mithilfe der GoogleMap Javascript-API