Google API не работает с Spring boot и maven - PullRequest
Новая
       1

Google API не работает с Spring boot и maven

0 голосов
/ 27 января 2019

Я провел собственное исследование и увидел, что spring-boot поднялся только до версии 2.1.1, я переопределил свойство, чтобы установить его на версию 3+, а затем мой дисплей стал странным с тимелистом.

https://gyazo.com/1cf33e13ad34eceffe0a118eb051d151 https://gyazo.com/527b0d0e0e434628a8b8a8661619a920

Это мой html-файл, который я пытаюсь использовать, и сообщение об ошибке, которое я получаю при переопределении Spring-boot версии 2.1.6.и это не сработало.Не уверен, что делать, но хотел бы, чтобы это отображалось правильно. 

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head th:replace="partials::head('Google API')">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <style>
        #locationField, #controls {
            position: relative;
            width: 480px;
        }
        #autocomplete {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 99%;
        }
        .label {
            text-align: right;
            font-weight: bold;
            width: 100px;
            color: #303030;
        }
        #address {
            border: 1px solid #000090;
            background-color: #f0f0ff;
            width: 480px;
            padding-right: 2px;
        }
        #address td {
            font-size: 10pt;
        }
        .field {
            width: 99%;
        }
        .slimField {
            width: 80px;
        }
        .wideField {
            width: 200px;
        }
        #locationField {
            height: 20px;
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
<div th:replace="partials::header"></div>
<div th:replace="partials::navbar"></div>

<div id="locationField">
    <input id="autocomplete" placeholder="Enter your address"
           onFocus="geolocate()" type="text"/>
</div>

<table id="address">
    <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
                                     disabled="true"/></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
                                                 disabled="true"/></td>
    </tr>
    <tr>
        <td class="label">City</td>
        <!-- Note: Selection of address components in this example is typical.
             You may need to adjust it for the locations relevant to your app. See
             https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
        -->
        <td class="wideField" colspan="3"><input class="field" id="locality"
                                                 disabled="true"/></td>
    </tr>
    <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
                                     id="administrative_area_level_1" disabled="true"/></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
                                     disabled="true"/></td>
    </tr>
    <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
                                                 id="country" disabled="true"/></td>
    </tr>
</table>

<script>
    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in the information.

    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

<div th:replace="partials::footer"></div>
<div th:replace="partials::scripts"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_WAS_HERE&libraries=places&callback=initAutocomplete"
        async defer></script>

</body>
</html>

////////////////////////////////////////////////////////////////

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">


<!--<div th:fragment="head (title)" >-->
<!--<title><span th:text="${title}"></span></title>-->
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>-->
<!--</div>-->
<head th:fragment="head(title)">
    <meta charset="UTF-8"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" />
    <link rel="stylesheet" href="/static/css/components/slideshow.css" />
    <link rel="stylesheet" href="/static/css/components/slidenav.css" />

    <style>
        .uk-card>p {
            word-wrap: break-word;
        }
        header {
            background-color: dodgerblue;
        }
        body, html {
            /*background-image: url("https://www.lucialighting.com/wp-content/uploads/2018/02/contemporary.jpg");*/
            background-color: rgb(244,247,249);
            background-repeat: no-repeat;
        }
        .slideshow-img {
            !important;
            max-width: max-content;
        }
        .ml-1 {
            margin-left: 20px;
        }
        .mt-1 {
            margin-top: 20px;
        }
        .logo-size {
            width: 350px;
            height: 75px;
        }
        .login-logout {
            margin-top: 25px;
        }
        .header-text-color {
            color: whitesmoke;
        }
        .header-text-color-center {
            color: #595959;
        }
    </style>

</head>
<body>

<div th:fragment="header">
    <header>
        <div class="uk-text-left uk-float-left">
            <a class="header-text-color" href="/">How to get Kwikrliquor!</a>
        </div>
            <label class="header-text-color-center uk-float-">30-Minute Delivery. Free Pickup.</label>
        <div class="uk-text-right uk-float-right">
            <label class="header-text-color">Invite Friends</label>
        </div>
    </header>
</div>

<!--<nav class="uk-navbar-container uk-navbar">-->
    <!--<div class="uk-navbar-left">-->

        <!--<ul class="uk-navbar-nav">-->
            <!--<li class="uk-active"><a href="#">Active</a></li>-->
            <!--<li>-->
                <!--<a href="#">Parent</a>-->
                <!--<div class="uk-navbar-dropdown">-->
                    <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
                        <!--<li class="uk-active"><a href="#">Active</a></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li class="uk-nav-header">Header</li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li class="uk-nav-divider"></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                    <!--</ul>-->
                <!--</div>-->
            <!--</li>-->
            <!--<li><a href="#">Item</a></li>-->
        <!--</ul>-->

    <!--</div>-->
    <!--<div class="uk-navbar-right">-->

        <!--<ul class="uk-navbar-nav">-->
            <!--<li>-->
                <!--<a href="#">Parent</a>-->
                <!--<div class="uk-navbar-dropdown">-->
                    <!--<ul class="uk-nav uk-navbar-dropdown-nav">-->
                        <!--<li class="uk-active"><a href="#">Active</a></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li class="uk-nav-header">Header</li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                        <!--<li class="uk-nav-divider"></li>-->
                        <!--<li><a href="#">Item</a></li>-->
                    <!--</ul>-->
                <!--</div>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->
<!--</nav>-->
<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="!isAuthenticated()">
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
            <li><a href="/products"><div>All Products</div></a></li>
            <li><a href="/products/beer"><div>Beer</div></a></li>
            <li><a href="/products/wine"><div>Wine</div></a></li>
            <li><a href="/products/liquor"><div>Liquor</div></a></li>
        </ul>
    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
            <li>
                <form th:action="@{/login}" th:method="GET">
                    <input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Login"/>
                </form>
            </li>
            <li>
                <a href="/shoppingCart"><i class="fas fa-shopping-cart fa-3x" /></a>
            </li>
        </ul>
    </div>

        <!--<ul class="uk-navbar-nav uk-nav-parent-icon">-->
            <!--<div sec:authorize="isAuthenticated()">-->
                <!--<li>-->
                    <!--<form th:action="@{/logout}" th:method="POST">-->
                        <!--<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>-->
                    <!--</form>-->
                <!--</li>-->
            <!--</div>-->
            <!--<div sec:authorize="!isAuthenticated()">-->
                <!--<li>-->
                    <!--<form th:action="@{/login}" th:method="GET">-->
                        <!--<input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Login"/>-->
                    <!--</form>-->
                <!--</li>-->
            <!--</div>-->
        <!--</ul>-->
</nav>

<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_CUSTOMER')">
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
            <li><a href="/products"><div>All Products</div></a></li>
            <li><a href="/products/beer"><div>Beer</div></a></li>
            <li><a href="/products/wine"><div>Wine</div></a></li>
            <li><a href="/products/liquor"><div>Liquor</div></a></li>
        </ul>
    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li class="uk-inline">
                <a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
                <ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
                    <li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
                    <li class="uk-nav-divider"></li>
                    <li>
                        <form th:action="@{/logout}" th:method="POST">
                            <input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
                        </form>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/shoppingCart"><i class="fas fa-shopping-cart fa-3x" /></a>
            </li>
        </ul>
    </div>
</nav>

<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_ADMIN')">
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
            <li><a href="/products"><div>All Products</div></a></li>
            <li><a href="/products/create">Create Product</a></li>
        </ul>
    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li class="uk-inline">
                <a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
                <ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
                    <li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
                    <li class="uk-nav-divider"></li>
                    <li>
                        <form th:action="@{/logout}" th:method="POST">
                            <input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
                        </form>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<nav th:fragment="navbar" class="uk-navbar uk-navbar-container" style="z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up" sec:authorize="hasRole('ROLE_DRIVER')">
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li><a href="/"><img class="logo-size" src="https://cdn.discordapp.com/attachments/178547154908872704/536720432661921819/kwikr-logo.png" alt="kwikrLogo"/></a></li>
            <li><a href="/products"><div>All Products</div></a></li>
            <li><a href="/driver_dashboard"><div>Dashboard</div></a></li>
        </ul>
    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav uk-nav-parent-icon">
            <li class="uk-inline">
                <a href="#"><div class="uk-text-large" sec:authentication="name"></div></a>
                <ul class="uk-nav uk-navbar-dropdown-nav" uk-dropdown="mode: click">
                    <li><a th:href="@{'/profile/edit'}">Edit Profile</a></li>
                    <li class="uk-nav-divider"></li>
                    <li>
                        <form th:action="@{/logout}" th:method="POST">
                            <input class="uk-button uk-button-default uk-button-small login-logout" type="submit" value="Logout"/>
                        </form>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>


<footer th:fragment="footer" class="footer fixed-bottom">
    <!--<div class="container">-->
        <!--<p class="text-muted text-center">Place sticky footer content here.</p>-->
    <!--</div>-->
</footer>

<div th:fragment="scripts">
    <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script src="/static/js/uikit.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit-icons.min.js"></script>
    <script src="/static/js/core/grid.js"></script>
    <script src="/static/js/core/grid.min.js"></script>
    <script src="/static/js/components/grid.js"></script>
    <script src="/static/js/components/grid.min.js"></script>
    <script src="/static/js/core/scrollspy.js"></script>
    <script src="/static/js/core/scrollspy.min.js"></script>
    <script src="/static/js/components/slideshow.js"></script>
    <script src="/static/js/components/slideshow.min.js"></script>
    <script src="/static/js/components/sticky.js"></script>
    <script src="/static/js/components/sticky.min.js"></script>
    <script src="/static/js/core/nav.js"></script>
    <script src="/static/js/core/nav.min.js"></script>

</div>

</body>

</html>

////////////////////////////////////////////////////////////////

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.18.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springblog</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springblog</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <thymeleaf.version>3.0.4.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
        <java.version>1.8</java.version>
        <skipTests>true</skipTests>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity4</artifactId>
            <version>3.0.4.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>uikit</artifactId>
            <version>2.10.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Пожалуйста, дайте мне знать, если кто-нибудь знает проблему с этим, вот код ошибки, который я получаю, когда пытаюсь запустить с версией ниже3 из spring-boot enter code here

org.xml.sax.SAXParseException: ссылка на сущность "библиотеки" должна заканчиваться символом ";"разделитель.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...