如何将 html + Blade 添加到 google maps api 的 javascript

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 是在 for 循环中构建的，在我的 Javascript 代码中，我无法在我的视图中创建一些 div。我所做的只是使用 Javascript 方法而不是使用刀片。'<img class="img-thumbnail" src="'+ window.location.href + "img/uploads/avatars/" + usersMapInfos[i].avatar + '" >'

Answer 1

试试这个

    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>';

Answer 2

我不能发表评论，但我希望这个答案有帮助。

它不起作用的原因是因为您尝试获取它的方式。这是您可以做到的另一种方法。

//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 文件。希望这可以帮助。快乐编码！:)

编辑：

您还可以data在 JQuery 中使用该属性。基本上只需将 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 代码：

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);});

        }