Afficher Google Maps sur la page Web (Spring Boot + Thymeleaf)
Aperçu
J'apprenais Spring Boot et je voulais afficher Google Map sur une page Web, j'ai donc essayé d'utiliser l'API JavaScript de Maps. Cette fois, j'utiliserai un fragment de Thymeleaf pour afficher Google Map sur l'écran d'accueil. Si j'intégrais javascript et css dans le fichier html, c'était un moment avec la source officielle de l'échantillon, mais En lisant chacun dans un fichier séparé, je ne savais pas où lire lors de l'utilisation de fragments. (En fait, javascript était intégré au HTML après tout.)
- La méthode de configuration GCP est omise.
environnement
- macOS Catalina
- Version： 10.15.7
- Eclipse IDE for Enterprise Java Developers.
- Version: 2020-03 (4.15.0)
- Plug-in STS
- Spring Boot 2.2.6
- Java8
- Maven
Site de référence
-
Site officiel de Google Cloud Platform --html, css, javascript ont des exemples de sources officielles, vous pouvez donc les utiliser tels quels.
-
Web Design Leaves ――Je l'ai utilisé comme référence si vous rencontriez des problèmes avec les paramètres GCP.
Structure des dossiers
Certains sont omis pour faciliter la visualisation.
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
Ceci est l'écran principal. À la place de «
shopMap.css est chargé ici.
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>
···réduction···
<!--contenu-->
<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>
C'est le code HTML qui décrit en fait Google Map.
Réécrivez la partie de "YOUR_API_KEY" avec la clé API obtenue par GCP.
Au début, j'ai chargé shopMap.css ici, mais il ne s'affichait pas correctement.
Probablement seule la partie <div th: fragment =" shop_map "> du fragment est incluse dans homeLayout.html
Par conséquent, il peut avoir été inutile de lire css avec la balise \
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">
···réduction···
<!--Élément Div pour afficher la carte-->
<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>
C'est le seul CSS, mais c'est essentiel.
home.css
#map {
height: 400px;
width: 600px;
}
Enfin, ajoutez le traitement de la méthode Get dans la classe de contrôleur.
Ajoutez le fragment que vous souhaitez spécifier au modèle et renvoyez homeLayout.html.
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";
}
}
Démarrez Spring Boot et accédez à http: // localhost: 8080 / shopMap.
- Le paramètre de limite de clé GCP est "URL de provenance HTTP (site Web)" et seul "http: // localhost / *" est spécifié.
Il est sorti en toute sécurité!
finalement
J'ai essayé d'utiliser l'API pour la première fois en premier lieu, mais l'API Maps JavaScript est très facile si vous affichez simplement la carte, et si vous la personnalisez, il semble que vous pouvez apprendre diverses choses tout en vous amusant. Comme je l'ai mentionné au début, javascript ne fonctionnait pas bien lorsque je le lisais en tant que fichier externe, et je ne savais pas où l'importer cette fois. J'essaierai à nouveau lorsque je procéderai au développement et approfondirai ma compréhension. À ce moment-là, afin de terminer cet article inachevé, je suis désolé de le poster une fois m (._.) M
Recommended Posts