Google Maps auf der Webseite anzeigen (Spring Boot + Thymeleaf)

Überblick

Ich habe Spring Boot gelernt und wollte Google Map auf einer Webseite anzeigen. Deshalb habe ich versucht, die JavaScript-API von Maps zu verwenden. Dieses Mal werde ich ein Fragment von Thymeleaf verwenden, um Google Map auf dem Startbildschirm anzuzeigen. Wenn ich Javascript und CSS in die HTML-Datei eingebettet habe, war es ein Moment mit der offiziellen Beispielquelle, aber Während ich jede Datei als separate Datei las, war ich verwirrt darüber, wo ich bei der Verwendung von Fragmenten lesen sollte. (Tatsächlich wurde Javascript schließlich in HTML eingebettet.)

Umgebung

Referenzseite

Ordnerstruktur

Einige sind zur einfachen Anzeige weggelassen.

src
└── main/
    ├── java/
    │   └── com/
    │       └── example/
    │           └── demo/
    │               ├── SampleApplication.java
    │               ├── WebConfig.java
    │               └── login/
    │                   └── controller/
    │                       └── HomeController.java
    └── resources/
        ├── application.properties
        ├── static/
        │   └── css/
        │       └── home.css
        └── templates/
            └── login/
                ├── homeLayout.html
                └── shopMap.html

Dies ist der Hauptbildschirm. In dem Teil von "

</ div>" möchte ich "shopMap.html" einfügen, das Google Map als Fragment beschreibt, und es anzeigen. .. Hier wird shopMap.css geladen.

homeLayout.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8"></meta>
    <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"></link>
    <script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <link th:href="@{/css/home.css}" rel="stylesheet"></link>
    <title>Home</title>
</head>
<body>

···Kürzung···

    <!--Inhalt-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-2 main">
                <div th:include="__${contents}__"></div>
            </div>
        </div>
    </div>
</body>
</html>

Dies ist das HTML, das Google Map tatsächlich beschreibt. Schreiben Sie den Teil von "YOUR_API_KEY" mit dem von GCP erhaltenen API-Schlüssel neu. Zuerst habe ich hier "shopMap.css" geladen, aber es wurde nicht richtig angezeigt. Wahrscheinlich ist nur der

Teil des Fragments in homeLayout.html` enthalten Daher war es möglicherweise bedeutungslos, CSS hier mit dem Tag \ zu lesen.

shopMap.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
</head>

<body>
    <div th:fragment="shop_map">

···Kürzung···

        <!--Div-Element zur Anzeige der Karte-->
		<div id="map"></div>
		<script>
		  var map;
		  function initMap() {
		    map = new google.maps.Map(document.getElementById('map'), {
		      center: {lat: -34.397, lng: 150.644},
		      zoom: 10
		    });
		  }
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" defer></script>
    </div>
</body>
</html>

Dies ist das einzige CSS, aber es ist wichtig.

home.css


#map {
  height: 400px;
  width: 600px;
}

Fügen Sie abschließend die Verarbeitung für die Get-Methode in der Controller-Klasse hinzu. Fügen Sie das Fragment, das Sie angeben möchten, zum Modell hinzu und geben Sie "homeLayout.html" zurück.

HomeController.java


package com.example.demo.login.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
	@GetMapping("/shopMap")
	public String getShopMap(Model model) {
		model.addAttribute("contents", "login/shopMap :: shop_map");
		return "login/homeLayout";
	}
}

Starten Sie Spring Boot und greifen Sie auf "http: // localhost: 8080 / shopMap" zu.

  • Die GCP-Schlüsselbegrenzungseinstellung lautet "HTTP Referrer (Website)", und es wird nur "http: // localhost / *" angegeben.

Es kam sicher heraus! Screen Shot 2020-11-01 at 8.32.28.png

Schließlich

Ich habe versucht, die API zum ersten Mal zu verwenden, aber die Maps-JavaScript-API ist sehr einfach, wenn Sie nur die Karte anzeigen und wenn Sie diese anpassen, können Sie anscheinend verschiedene Dinge lernen, während Sie Spaß haben. Wie eingangs erwähnt, funktionierte Javascript nicht gut, als ich es als externe Datei las, und ich wusste diesmal nicht, wo ich es importieren sollte. Ich werde es erneut versuchen, wenn ich mit der Entwicklung fortfahre und mein Verständnis vertiefe. Um diesen unvollendeten Artikel zu vervollständigen, muss ich ihn zu diesem Zeitpunkt leider einmal m (._.) M veröffentlichen

Recommended Posts