使用 laravel 08 中的 Mapbox 獲取特定地址的經緯度值保存在特定地址的本地主機中的特定位置

Question

我正在制作帶有食品訂購和交付模塊的網站。 為此，我正在使用 Mapbox，首先我想 select 存儲地址位置與經度和緯度，我想從我的地址表中獲取 select。我不知道如何使用特定商店的經度和緯度顯示地址位置-地址並用標記顯示。

下面是Controller function的代碼，用於獲取id為特定地址的經緯度值：

public function mapofstore($id)
    {
        $data = DB::Table('addresses')->select('longitude','latitude')->where('id',$id)->get();
        // dd($data);

        return view('MainAdmin.frontend.reports.storelocation',compact('data'));
    }

以下是 Mapbox 官方文檔中 javascript 參考的代碼：

<div class="container">
    <div class="map-area"> 
        <div id='map' style=" width:100%; height: 500px; border: solid;border-color: #1e828de8;border-radius: 1%;"></div>
        <pre id="info"></pre>
    </div>
</div>

<script>
    mapboxgl.accessToken = 'My_MapBox_Api';
    
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'Style_URL'
    });
    
    navigator.geolocation.getCurrentPosition(successLocation,errorLocation,{
        enableHighAccuracy: true
    
    })
    
    function successLocation(){
        console.log(position)
    }
    function errorLocation(){
    }
    
    function getReverseGeocodingData(lat, lng) {
        var latlng = new google.maps.LatLng(lat, lng);
        // This is making the Geocode request
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng },  (results, status) =>{
            if (status !== google.maps.GeocoderStatus.OK) {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                var address = (results[0].formatted_address);
            }
        });
    }
    
    function onClick(event){
                document.getElementById('lat').value = event.latlng.lat;
                document.getElementById('lng').value = event.latlng.lng;
                var group = L.featureGroup();
                group.id = 'group';
                var p_base = L.circleMarker([event.latlng.lat ,event.latlng.lng], {
                    color: '#fff',
                    fillColor: '#6a97cb',
                    fillOpacity: 1,
                    weight: 1,
                    radius: 6
                }).addTo(group);
                map.addLayer(group);
            }
   
    // function START for getting lng,lat of current mouse position----------------
    map.on('mousemove', (e) => {
    document.getElementById('info').innerHTML =
    // `e.point` is the x, y coordinates of the `mousemove` event
    // relative to the top-left corner of the map.
    JSON.stringify(e.point) +
    '<br />' +
    // `e.lngLat` is the longitude, latitude geographical position of the event.
    JSON.stringify(e.lngLat.wrap());
    });
    // function END for getting lng,lat of current mouse position------------------
    
    
    // function START for getting current location----------------
    map.addControl(new mapboxgl.NavigationControl());
    map.addControl(
    new mapboxgl.GeolocateControl({
    positionOption:{
    enableHighAccuracy:true
    },
    trackUserLocation:true
    }));
    // function END for getting current location------------------
    
    // function for Direction and Pointing of one Point-----------
    map.addControl(
    new MapboxDirections({
    accessToken: mapboxgl.accessToken
    }),
    'top-left'
    );
    const addMarker = () => {
    const marker = new mapboxgl.Marker()
    // const minPopup = new mapboxgl.Popup({closeButton: false, closeOnClick: false})
    minPopup.setHTML("")
    marker.setPopup(minPopup)
    marker.setLngLat([36.67981,22.10816])
    marker.addTo(map)
    marker.togglePopup();
    }
    map.on("load",addMarker)
    $.getJSON("https://jsonip.com?callback=?", function (data) {
      var ip = data;
      var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
         // console.log(url);
        $.ajax({
         url :  '{{URL::to('updateip')}}' + '/' + id,
          type: 'POST',
         data: {_token: CSRF_TOKEN,
           "ip": ip,
           "id": id
        },
           dataType: 'json',
             success: function(response){    
          }
        });
    });
    // function for Direction and Pointing of one Point-----------
    
    function show_marker(Lng,Lat,date,In,Out,hname,hin,hout)
    {
     const marker = new mapboxgl.Marker({ "color": "#b40219" })
     // const minPopup = new mapboxgl.Popup({closeButton: false, closeOnClick: false})
     minPopup.setHTML("<strong><b>IN n OUT DATE:</b><br>"+date+"<br><b>IN n OUT TIME:</b><br>"+In+"-"+Out+"<br><b>HOTEL NAME:</b><br>"+hname+"<br><b>HOTEL IN n OUT:</b><br>"+hin+"-"+hout+"</strong>")
     // marker.setPopup(minPopup)
     marker.setLngLat([Lng,Lat])
     // marker.setRotation(45);
     marker.addTo(map)
    }
    
    const popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat([-96, 37.8])
    .setHTML('<h1>Hello World!</h1>')
    .addTo(map);
   
    </script>

Answer 1

您已經制作了addMarker 。 你只需要從你的數據收集中傳遞 lat long 。 我假設您只使用刀片模板。 在刀片模板中，您可以輕松地將數據導入 javascript 變量。

var data = <?php echo json_encode($data); ?>

然后您必須使用將編碼數據解析為新變量

var newData = JSON.parse(data);

之后，您可以使用newData獲取經緯度，您可以將其傳入 function 並使用它。

var lat = newData[0].latitude
var lng = newData[0].longitude

const addMarker = (lat, lng) => {
    const marker = new mapboxgl.Marker()
    minPopup.setHTML("")
    marker.setPopup(minPopup)
    marker.setLngLat([lng,lat])
    marker.addTo(map)
    marker.togglePopup();
}

// calling add marker
addMarker(lat, lng);

將數據傳遞給 javascript 的參考。 請注意，這些方法在不同的 Laravel 版本中有所不同。