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

Question

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

如何动态传入地图模型？

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

这是 PHP blade 文件代码与 JS...

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

如果您的 modal 和 map 工作正常，这将专门打开点击按钮的地图位置。

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

How to pass Latitude and Longitude map via model button with the help of JavaScript

javascript

php

maps

laravel