如何在JavaScript的帮助下通过模型按钮传递纬度和经度地图

Question

我在地图上有经度和纬度。

如何动态传递地图模型？

我想这样打开地图，但是每个地图按钮上都是动态的

这是带有JS的PHP刀片文件代码...

var myLatLng = {
    lat: ??, 
    lng: ??
};
function myMap() {
    var mapProp= {
        center: myLatLng,
        zoom:15,
        gestureHandling: 'greedy'
    };
    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    placeMarker(map, myLatLng);
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });
}

@foreach($toilets as $toilet)
    <tr>
        <th scope="row">{{ $toilet->id }}</th>
        <td title="{{ $toilet->owner['email'] }}">
            {{ $toilet->owner['id'] }}
        </td>
        <td>{{ $toilet->toilet_name }}</td>
        <td><b>${{ $toilet->price }}</b></td>
        <td>{{ $toilet->complex_name }}</td>
        <td>{{ $toilet->address.$toilet->getFullAddress() }}</td>
        <td>
            @if($toilet->status==1) <f class="text-success">Active</f> 
            @else <f class="text-warning">Not Active</f> @endif
        </td>
        <td>
            {{ $toilet->created_at->format('d/m/Y').' at '.$toilet->created_at->format('g:i A') }}
        </td>
        <td>
            <button class="btn btn-success" class="btn btn-primary"
             data-toggle="modal" data-target="{{$toilet->toilet_lat . $toilet->toilet_lng}}">
                Map
            </button>
        </td>
    </tr>
@endforeach

Answer 1

这很简单。您只需要在myMap()函数中传递坐标为myMap(latitude,longitude)

编辑您的按钮到下面编写的代码：

<button class="btn btn-success" data-toggle="modal" data-target="your_modal_class"
  onclick="myMap({{ $toilet->toilet_lng }},{{ $toilet->toilet_lng }})">
    Map
</button>
<!-- this will pass coords as parameter to map function -->

此后，将myMap()函数更改为以下代码：

function myMap(currentLat,currentLng) {    //getting values by reference
    var myLatLng = {
        lat: currentLat,    //set current lat value to map
        lng: currentLng     //set current long value to map
    };
    var mapProp= {
        center: myLatLng,
        zoom:15,
        gestureHandling: 'greedy'
    };
    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    placeMarker(map, myLatLng);
}

如果您的模态和地图正常工作，将专门打开单击按钮的地图位置。