首頁猿問如何將 html + Blade...

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

JavaScript

一只斗牛犬 2021-11-26 16:50:10

我正在使用 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 + '" >'

查看完整描述

2 回答

阿波羅的戰車

TA貢獻1862條經驗獲得超6個贊

試試這個

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

反對回復 2021-11-26

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

我不能發表評論，但我希望這個答案有幫助。

它不起作用的原因是因為您嘗試獲取它的方式。這是您可以做到的另一種方法。

//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 文件。希望這可以幫助?？鞓肪幋a！:)

編輯：

您還可以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

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

}

反對回復 2021-11-26

2 回答
0 關注
198 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答