Javascript 如何将ajax数据从谷歌地图信息窗口发送到laravel控制器？

我有一个使用谷歌地图API的Laravel项目。 我有一个map click事件，当它被触发时，我会向该映射添加一个标记。 我还为这个标记添加了一个信息窗口

我想在InfoWindow打开时向用户显示一个表单，并使用Ajax将一些数据发送到Laravel控制器

我该怎么做

任何建议都会有帮助的，谢谢

这是我的密码：

var map;
var centerUrl = {lat: 29.591768, lng: 52.583698};
var markers = [] ;

            function addMyListener(aMarker, aInfoWindow) {
                aMarker.addListener('click', function () {
                    aInfoWindow.open(map, aMarker);
                });
            }
            function addMarker(lat,lng,infoWindow){
            var marker = new google.maps.Marker({
                position:{lat:lat,lng:lng},
                map:map,
            }) ;
            var content = "<div style='height: 300px;width: 300px;'>\n" +
                "    <div class='row justify-content-center mt-4 mb-4'>\n" +
                "        <div class='col-md-6 justify-content-center'>\n" +
                "            <h4 class='mb-4'>Add New User (Driver)</h4>\n" +
                "            <form>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Name: </label>\n" +
                "                    <input type='text' name='name' class='form-control' placeholder='Name ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Email: </label>\n" +
                "                    <input type='email' name='email' class='form-control' placeholder='Email ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Lat:</label>\n" +
                "                    <input id='lat' type='text' value='"+lat.toFixed(3)+"' name='lat' class='form-control' placeholder='Lat ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Lng: </label>\n" +
                "                    <input type='text' id='lng' name='lng' class='form-control' value='"+lng.toFixed(3)+"' placeholder='Lng ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <button class='btn btn-success btn-submit btn-lg'>Send</button>\n" +
                "                </div>\n" +
                "            </form>\n" +
                "        </div>\n" +
                "\n" +
                "    </div>\n" +
                    "<p id='newp'></p>"
                "</div>";


            infoWindow.setContent(content);
            infoWindow.open(map,marker) ;
        }

           function initMap() {


            var infoWindow = new google.maps.InfoWindow() ;
            // Create new Map Instance
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: centerUrl,
                zoom: 5
            });

            // Show Users On Map
            @forEach($users as $user)

                var lat = parseFloat({{$user->lat}});
                var lng = parseFloat({{$user->long}});
                var content = "<p>{{$user->name}}</p><hr/><p>{{$user->email}}</p><hr/><p>{{$user->id}}</p>";
                var infoWindow = new google.maps.InfoWindow({
                    content: content
                });
                var markerUrl = {lat: lat, lng: lng};
                var marker = new google.maps.Marker({
                    position: markerUrl,
                    map: map
                });

                markers.push(marker);
                addMyListener(marker, infoWindow);

            @endforeach

            // Add a marker clusterer to manage the markers.
            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


            // Add Marker On Click Event
            google.maps.event.addListener(map,'click',function (event) {
                addMarker(event.latLng.lat() , event.latLng.lng(),infoWindow);
            });

        }

var映射；
var centerUrl={lat:29.591768，lng:52.583698}；
var标记=[]；
函数addMyListener（aMarker、aInfoWindow）{
aMarker.addListener（'click'，函数（）{
打开（地图，aMarker）；
});
}
功能添加标记（lat、lng、信息窗口）{
var marker=new google.maps.marker({
位置：{lat:lat，lng:lng}，
地图：地图，
}) ;
var content=“\n”+
“\n”+
“\n”+
“添加新用户（驱动程序）\n”+
“\n”+
“\n”+
“名称：\n”+
“\n”+
“\n”+
“\n”+
“电子邮件：\n”+
“\n”+
“\n”+
“\n”+
“Lat:\n”+
“\n”+
“\n”+
“\n”+
“液化天然气：\n”+
“\n”+
“\n”+
“\n”+
“发送\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“
”
"";
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
}
函数initMap（）{
var infoWindow=new google.maps.infoWindow（）；
//创建新地图实例
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：中心URL，
缩放：5
});
//在地图上显示用户
@forEach（$users作为$user）
var lat=parseFloat（{{$user->lat}}）；
var lng=parseFloat（{{$user->long}）；
var content=“{{$user->name}
{{{$user->email}
{{{$user->id}
”；
var infoWindow=new google.maps.infoWindow({
内容：内容
});
var-markerUrl={lat:lat，lng:lng}；
var marker=new google.maps.marker({
职位：马克鲁尔，
地图：地图
});
标记器。推（标记器）；
addMyListener（标记，信息窗口）；
@endforeach
//添加标记群集器以管理标记。
var markerCluster=新的MarkerClusterer（地图、标记、，
{imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
//单击事件时添加标记
google.maps.event.addListener（映射，'click'，函数（事件）{
addMarker（event.latLng.lat（），event.latLng.lng（），infoWindow）；
});
}

我编辑了这个问题。 这是我所有的代码。

信息窗口有一个

当包含信息窗口内容的

附加到DOM时，将触发此事件。如果动态生成信息窗口内容，您可能希望监视此事件

因此，如果需要访问在Infowindow中注入的HTML元素，可以（应该）使用此事件

例如：

google.maps.event.addListener(infowindow, 'domready', function () {

    // Here you are able to access your Infowindow content elements...
    // You can bind events to your form, form fields, buttons, etc.
});

---

下面是一个非常基本的示例，它在信息窗口中显示一个表单，然后将输入值设置为标记标题：

ajax函数在哪里？@madalinivascu这正是我的问题，我应该在哪里添加ajax？在页面上的脚本标记中，在哪里？@madalinivascu execuse me what？@madalinivascu我编辑了这个问题，因此，您可以看到我的所有代码。谢谢，它对一个标记有效，但是当我添加多个标记时，它只对其中一个有效。您应该提供一个示例来演示这个问题。您发布的代码不完整。根据您发布的内容，我假设您正在为每个标记创建一个Infowindow对象，这可能并不理想。您应该在全局范围内创建一个Infowindow实例，然后在marker click上使用

setContent

方法…检查上面的说明。顺便说一句，我的答案中的例子fiddle准确地显示了您的要求，并且使用了多个标记…我编辑了这个问题，以便您可以看到我的所有代码。我应该在哪里为ajax添加csrf_标记，以及如何将数据发送到laravel，请帮助我，谢谢。