如何在Google Maps API的JavaScript變量中添加HTML + Blade

Question

我正在使用Google Maps API構建帶有用戶的MAP。

所以我想在我的地圖上添加信息窗口，行得通！

但是我也想插入化身和指向用戶個人資料的鏈接，因此我為此使用了Blade。

除了刀片的各個部分之外，其他所有部件都工作正常。

我嘗試了不同的編寫方式。

var contentString = '<div id="content">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1>' +
                '<img class="img-thumbnail" src="{{ asset(' + '<img class="img-thumbnail" src="{{ asset(img/uploads/avatars/ . ' + usersMapInfos[i].avatar + ') }}" >' +
                '<div id="bodyContent">' +
                '<p>' + usersMapInfos[i].description + '</p>' +
                '<p> <a href="{{ route(profiles.show, ' + usersMapInfos[i].id + ') }}"></a></p>' +
                '</div>' +
                '</div>';

所以這行：

+'<img class="img-thumbnail" src="{{ asset(img/uploads/avatars/ . ' + usersMapInfos[i].avatar + ') }}" >' +

這行：

+'<p> <a href="{{ route(profiles.show, ' + usersMapInfos[i].id + ') }}"></a></p>' +

編輯

因此，由於我的infoWindows是在Java代碼內的for循環內構建的，因此無法更改其執行方式，因此無法在視圖中創建一些div。

我所做的只是使用Javascript方法，而不是使用Blade。

'<img class="img-thumbnail" src="'+ window.location.href + "img/uploads/avatars/" + usersMapInfos[i].avatar + '" >'

Github上的JS文件 The Blade文件

Answer 1

我無法發表評論，但我希望這個答案會有所幫助。

它不起作用的原因是因為您試圖獲取它。 這是您可以執行的另一種方法。

//Use a variable to assign it instead of using inline blade syntax inside js html content
var imageSource = {{ asset('img/uploads/avatars/') }}

//Same for the other one
var Route = {{ route(profiles.show, ' + usersMapInfos[i].id + ') }}

var contentString = '<div id="content">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1>' +

                //Not sure why you have an image tag inside the source of another img tag
                //I will remove this and make it one for the sake of this example

                '<img class="img-thumbnail" src=" ' + imageSource + usersMapInfos[i].avatar + '" >' +

                '<div id="bodyContent">' +
                '<p>' + usersMapInfos[i].description + '</p>' +
                '<p> <a href="' + Route + '"></a></p>' +
                '</div>' +
                '</div>';

因此，基本上，將路由和資產分配給js變量，然后將變量提供給js文件。 希望這可以幫助。 編碼愉快！ :)

編輯：

您也可以在JQuery中使用data屬性。 基本上只是將data屬性分配給html上的元素。 您在問題中提到您正在同一刀片文件中使用JS。 使用此方法，您也可以將此值傳遞到外部JS文件。 這是一個例子。 希望這可以幫助您入門：

//In your html, create a sample element. I will create a div for now
//This div assumes that this is a container for the map or something

<div id="container" data-imgsource="{{ asset('img/uploads/avatars/') }}" ></div>

//Now you can call this data attribute from your js code whether the js is in your blade file or in an external js file. Do this

$('#container').data("imgsource") //Voila. Now you have the link
//Put this in a variable and pass it in to your code. Like so:
var imageRouteLink = $('#container').data("imgsource") //Voila. Now you have the link

就我個人而言，我對許多Ajax和其他請求都使用了此方法，因為它更干凈，可以讓我使用外部JS而不是在刀片內部使用JS。 當然，在刀片中使用少量JS並沒有錯，但是過多的JS可能會在以后引起頭痛。

更新

這是更新的JS代碼：

var url_origin   = window.location.origin;

        for (let i = 0; i < usersMapInfos.length; i++) {
            const contentString = '<div id="content">' +
                '<a href="' + url_origin + "/profiles/" + usersMapInfos[i].id + '">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1></a>' +
                '<img class="img-thumbnail" src="' + url_origin + "/img/uploads/avatars/" + usersMapInfos[i].avatar + '" >' +
                '<br>' +
                '<div id="bodyContent">' +
                '<p>' + usersMapInfos[i].description + '</p>' +
                '</div>' +
                '</div>';

            const infowindow = new google.maps.InfoWindow({content: contentString});
            const latLng = new google.maps.LatLng(usersMapInfos[i].address_latitude, usersMapInfos[i].address_longitude);
            const marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: usersMapInfos[i].username
            });

            marker.addListener('click', function() {infowindow.open(map, marker);});

        }

Answer 2

試試這個

    var contentString = '<div id="content">' +
        '<h1 id="firstHeading" class="firstHeading">' +
        usersMapInfos[i].username + '</h1>' +
        '<img class="img-thumbnail" src="{!! asset('img/uploads/avatars/' . usersMapInfos[i].avatar) !!}" >' +
        '<div id="bodyContent">' +
        '<p>' + usersMapInfos[i].description + '</p>' +
        '<p> <a href="{!! route('profiles.show', usersMapInfos[i].id) !!}"></a></p>' +
        '</div>' +
        '</div>';