如何将 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

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

Answer 2

我不能发表评论，但我希望这个答案有帮助。它不起作用的原因是因为您尝试获取它的方式。这是您可以做到的另一种方法。//Use a variable to assign it instead of using inline blade syntax inside js html contentvar imageSource = {{ asset('img/uploads/avatars/') }}//Same for the other onevar Route = {{ route(profiles.show, ' + usersMapInfos[i].id + ') }}var contentString = '<div id="content">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<h1 id="firstHeading" class="firstHeading">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; usersMapInfos[i].username + '</h1>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Not sure why you have an image tag inside the source of another img tag&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //I will remove this and make it one for the sake of this example&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<img class="img-thumbnail" src=" ' + imageSource + usersMapInfos[i].avatar + '" >' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div id="bodyContent">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<p>' + usersMapInfos[i].description + '</p>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<p> <a href="' + Route + '"></a></p>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</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&nbsp; &nbsp;= window.location.origin;&nbsp; &nbsp; &nbsp; &nbsp; for (let i = 0; i < usersMapInfos.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const contentString = '<div id="content">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<a href="' + url_origin + "/profiles/" + usersMapInfos[i].id + '">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<h1 id="firstHeading" class="firstHeading">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; usersMapInfos[i].username + '</h1></a>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<img class="img-thumbnail" src="' + url_origin + "/img/uploads/avatars/" + usersMapInfos[i].avatar + '" >' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<br>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div id="bodyContent">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<p>' + usersMapInfos[i].description + '</p>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const infowindow = new google.maps.InfoWindow({content: contentString});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const latLng = new google.maps.LatLng(usersMapInfos[i].address_latitude, usersMapInfos[i].address_longitude);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: latLng,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: usersMapInfos[i].username&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marker.addListener('click', function() {infowindow.open(map, marker);});&nbsp; &nbsp; &nbsp; &nbsp; }