使用js文件将数据从Javascipt传递到html支持。

Question

我希望变量名中的值以id driverName显示在div上。我尝试过使用内部HTML设置，但没有任何效果。有什么方法可以直接从上面的javascript文件将变量传递给内容吗？一旦该方法生效，我将使用相同的解决方案来确定其馀部分。

 const arrayItem = item.split("#")
        .map((item, i) => `${item}`);
    var names = arrayItem[0];
    var location = arrayItem[1];
    var locationAddress = arrayItem[2];
    var regNo = arrayItem[3];
    var tripStatus = arrayItem[4];
    var startAddress = arrayItem[5];
    var endAddress = arrayItem[6];

    addMarker({
        coords: { lat: -1.294219, lng: 36.806824 },
        iconImage: taxi_available,
        content: `<p class="d-none">application|identifier</p><h6 class="d-flex align-items-center">
    <div class="card mb-0">
        <div class="card-body p-0 mb-2">
               <div class="d-flex">

               <div class="flex-shrink-0 align-self-center me-3">
                   <img src="assets/images/users/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
               </div>

               <div class="flex-grow-1 overflow-hidden pe-5">
                   <h5 class="text-truncate font-size-14 mb-1 text-capitalize">
                   <div id="driverName">{{$names}}</div>
                    <div class="rating-star">
                            <input type="hidden" class="rating" data-filled="mdi mdi-star text-warning" data-empty="mdi mdi-star-outline text-muted" data-readonly value="3.5" />
                        </div>
                   </h5>
                   <p class="text-truncate mb-0 text-uppercase">KAB 123P</p>
               </div>

               <div class="font-size-11 text-right">
                    <p class="text-muted mb-2"><i class="mdi mdi-circle text-primary align-middle me-1"></i> Available for Booking</p>
                    <p class="text-muted mb-0"><i class="mdi mdi-clock text-muted align-middle me-1"></i> Last seen at 12:23 AM</p>
               </div>
               </div>
        </div>

        <div class="card-body bg-light d-flex p-1>
            <p class="mb-0">
                <i class="mdi mdi-map-marker text-info align-middle me-1 font-18px"></i>
            </p>
        <div>
        <p class="text-muted mb-0">Current Location</p>
        <p class="mb-0">
        <span class="the-clicked-address"></span> Nairobi hospital, Ngong Road, Nairobi, Kenya
        </p>
       </div>
        </div>
    </div>`
    });

下面是我的js函数，用于向地图添加标记。

function addMarker(props) {
//add marker
var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    animation: google.maps.Animation.DROP,
    // icon:props.iconImage
});

if (!props.content) {
    gmarkers.push(marker);

}

if (props.iconImage) {
    //set icon image if its there
    marker.setIcon(props.iconImage);

}

// check if there is content
if (props.content) {
    //set icon image if its there

    var infowindow = new google.maps.InfoWindow({
        content: props.content
    });

    marker.addListener('mouseover', function(e) {

        infowindow.open(map, marker);

        var newCoords = e.latLng;
        newCoords = newCoords.toString();
        // alert(newCoords);

        var Latitude;
        var longitude;
        longitude = newCoords.substring(newCoords.lastIndexOf(",") + 1);
        Latitude = newCoords.substring(0, newCoords.indexOf(','));
        Latitude = Latitude.substring(Latitude.lastIndexOf("(") + 1);
        longitude = longitude.substring(0, longitude.indexOf(')'));

        reverseGeocoding(Latitude, longitude);
        // alert("mouse hovered");

    });

    marker.addListener('click', function(e) {
        toggleBounce(marker);

        var newCoords = e.latLng;
        newCoords = newCoords.toString();
        // alert(newCoords);

        var Latitude;
        var longitude;
        longitude = newCoords.substring(newCoords.lastIndexOf(",") + 1);
        Latitude = newCoords.substring(0, newCoords.indexOf(','));
        Latitude = Latitude.substring(Latitude.lastIndexOf("(") + 1);
        longitude = longitude.substring(0, longitude.indexOf(')'));

        reverseGeocoding(Latitude, longitude);


        // alert(iconImage);
        // alert( e.latLng);

        //position of the clicked marker . the longitude and latitude
        var pointPosition = e.latLng;

        //gettting the image

        //initializing image as empty
        var theImage = "assets/images/billboard-ads/no-add.jpg";

        //checking if the content has an image
        if (infowindow.content.includes("<img")) {
            //if it has image assign mage to

            theImage = infowindow.content.substring(infowindow.content.indexOf('src="') + 5);
            //the image url
            theImage = theImage.substring(0, theImage.indexOf('"'));


        }

        var theContent = infowindow.content.substr(18);
        var theContent = theContent.substring(0, theContent.indexOf('<'));

        //the group of markers eg car,incident,collection points etc
        var theGroup = theContent.substring(0, theContent.indexOf('|'));

        //the unique identifier of the clicked item eg number plate
        var uniqueIdentifier = theContent.substring(theContent.lastIndexOf("|") + 1);

        // alert(theGroup);

        //if else statements to bring out the correct side details depending on the groups category

        if (theImage != "") {
            $('#plate .plateImg').attr("src", theImage);
            $('.plateImg').removeClass('d-none');

        } else {
            $('.plateImg').addClass('d-none');
        }

        if (theGroup == "multi-plate") {

            $('#multi-plate .plateImg').removeClass('d-none');

            $('#multi-plate').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "plate") {

            $('#plate').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "plate-available") {

            $('#plate .plate-application-plate').removeClass('d-none').prev().addClass('d-none');

            $('#plate').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "application") {

            $('#application .plateImg').attr("src", theImage);

            $('#application').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }


        if (theGroup == "approved") {
            $('#approved .plateImg').attr("src", theImage);

            $('#approved').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }



        if (theGroup == "car") {
            //functions related to cars goes here
            $('#car-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");

        }

        if (theGroup == "incident") {
            //functions for incidents

            $('#incident-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");

        }

        if (theGroup == "collectionPoint") {
            //functions for collection points
            $('#collectionPoint-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "agent") {
            //function for agents
            $('#agents-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "offstreetParking") {
            //function for off street parking
            $('#offstreet-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");
        }

        if (theGroup == "street") {
            //function for on street parking
            $('#street-info').removeClass('left-100').siblings().addClass('left-100');
            $('.main-map-container .ma-backdrop').removeClass('d-none');
            $(".content, .header").append('<div class="ma-backdrop" data-ma-action="aside-close" data-ma-target=' + e + " />");

        }

        // this shows the more details
        // alert('clicked');

        var theCanvas = new bootstrap.Offcanvas(offcanvasExample)
        theCanvas.show()





    });

    // close content when mouse exits
    marker.addListener('mouseout', function() {
        infowindow.close(map, marker);

    });

  }
}

Answer 1

如果我正确理解了您的问题，我认为您想使用${names}而不是{{$names}}。您可能会将模板语法与jinja2样式混淆。

${}是javascript中的模板文字语法。看看这里的文档