#javascript #php #jquery #laravel #google-maps
Вопрос:
У меня есть динамическое текстовое поле(добавить еще), в котором показано, как Google размещает самовнушение на каждом. Мне нужно сохранить каждый лат длиной с адреса. Я получаю lat долго, но не могу получить его в запросе для всех этих. У меня есть система для создания полилиний по заданным адресам(работает), но я не могу сохранить их в бд.
Мой файл с лезвием
lt;div class="content-wrapper"gt; lt;div class="row"gt; lt;div class="col-12 grid-margin"gt; lt;div class="card"gt; lt;div class="card-body"gt; lt;h4 class="card-title"gt;Schedule Job for lt;ugt;{{$shipment-gt;shipment_number}}lt;/ugt;lt;/h4gt; lt;p class="card-description"gt; Fill up following details for Load assignment lt;/pgt; lt;form class="form-sample" method="POST" action="{{route('job-schedules.store')}}"gt; @csrf @method('POST') lt;p class="card-description"gt; Add Stops lt;tdgt;lt;button type="button" name="add" id="dynamic-ar" class="btn btn-outline-primary btn-sm"gt;Add Morelt;/buttongt;lt;/tdgt; lt;/pgt; lt;div class="row"gt; lt;div class="col-md-4"gt; lt;div id="dynamicAddRemove"gt; lt;div class="input-group"gt; lt;input id="pac-input" name="endpoints[0][endpoint]" type="text" class="col-form-label-sm form-control address" placeholder="Enter location" /gt; lt;input type="hidden" name="endpoints[0][endpoint_lat]" id="endpoint_lat0" value=""gt; lt;input type="hidden" name="endpoints[0][endpoint_lng]" id="endpoint_lng0" value=""gt; lt;/divgt;lt;brgt; lt;div class="input-group"gt; lt;input id="pac-input1" name="endpoints[1][endpoint]" type="text" class="col-form-label-sm form-control address" placeholder="Enter location" /gt; lt;input type="hidden" name="endpoints[1][endpoint_lat]" id="endpoint_lat1" value=""gt; lt;input type="hidden" name="endpoints[1][endpoint_lng]" id="endpoint_lng1" value=""gt; lt;/divgt; lt;/divgt; lt;brgt; lt;button type="submit" class="btn btn-outline-success btn-block"gt;Savelt;/buttongt; lt;a href="javascript:void(0)" id="set"gt;Show routelt;/agt; lt;/divgt; lt;div class="col-md-8"gt; lt;div id="map" style="height: 540px;"gt;lt;/divgt; lt;div id="maptest" style="height: 540px;" style="display:none;"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Мой Js
lt; script src = "https://polyfill.io/v3/polyfill.min.js?features=default" gt; lt; /scriptgt; lt; script src = "https://maps.googleapis.com/maps/api/js?key=mykeyamp;callback=startamp;libraries=placesamp;v=weekly" async gt; lt; /scriptgt; lt; script type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYamp;libraries=places" gt; lt; /scriptgt; lt; script type = "text/javascript" gt; const waypts = []; var j = 1; $("#dynamic-ar").click(function() { j; $("#dynamicAddRemove").append(`lt;brgt; lt;div class="input-group"gt; lt;input id="pac-input` j `" name="endpoints[` j `][endpoint]" type="text" class="col-form-label-sm form-control address" placeholder="Enter a location" /gt; lt;input type="hidden" name="endpoints[` j `][endpoint_lat]" id="endpoint_lat` j `" value=""gt; lt;input type="hidden" name="endpoints[` j `][endpoint_lng]" id="endpoint_lng` j `" value=""gt; lt;div class="input-group-append"gt; lt;a class="remove-input-field" data-toggle="tooltip" title="Show" href="#"gt;lt;i class="mdi mdi-delete"gt;lt;/igt;lt;/agt; lt;/divgt; lt;/divgt;`); var clone = document.getElementById('pac-input' j); var ac = new google.maps.places.Autocomplete(clone); //apply listener google.maps.event.addListener(ac, 'place_changed', function() { var placeLocation = this.getPlace(); var Lats = placeLocation.geometry.location.lat(); var Lngs = placeLocation.geometry.location.lng(); waypts.push({ lat: Lats, lng: Lngs, }); }); }); $(document).on('click', '.remove-input-field', function() { $(this).parents('div.input-group').remove(); }); lt; /scriptgt; lt; script gt; var inputs = document.getElementsByClassName('address'); var autocompletes = []; function initialize() { for (var i = 0; i lt; inputs.length; i ) { var autocomplete = new google.maps.places.Autocomplete(inputs[i]); autocomplete.inputId = inputs[i].id; autocomplete.addListener('place_changed', function() { var place = this.getPlace(); var myLat = place.geometry.location.lat(); var myLng = place.geometry.location.lng(); waypts.push({ lat: myLat, lng: myLng, }); }); } } function setInputValue(input_id, val) { document.getElementById(input_id).setAttribute('value', val); } lt; /scriptgt; lt; script gt; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: 0, lng: 0 }, mapTypeId: "terrain", }); const flightPlanCoordinates = [ waypts ]; const lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, }; const flightPath = new google.maps.Polyline({ path: waypts, geodesic: true, strokeColor: "#4A89F3", strokeOpacity: 1.0, strokeWeight: 2, icons: [{ icon: lineSymbol, offset: "100%", }, ], }); var bounds = new google.maps.LatLngBounds(); for (let i = 0; i lt; waypts.length; i ) { var point1 = new google.maps.LatLng(waypts[i]); bounds.extend(point1); } flightPath.setMap(map); map.fitBounds(bounds); } google.maps.event.addDomListener(window, 'load', initialize); $('#set').click(function() { initMap(); }); lt; /scriptgt; My Controller
public function store(Request $request) { dd($request-gt;endpoints); $input = $request-gt;except(['_token']); $schedule = JobSchedule::create($input); foreach ($request-gt;endpoints as $key =gt; $value) { $value['job_schedule_id'] = $schedule-gt;id; JobScheduleEndpoint::create($value); } return redirect()-gt;route('customer.index') -gt;with('success','Customer added successfully.'); } In model i have given lat long in fillable also
use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; use AppModelsJobSchedule; class JobScheduleEndpoint extends Model { use HasFactory; protected $fillable = [ 'job_schedule_id', 'endpoint', 'endpoint_lat', 'endpoint_lng', 'status', ]; public function job() { return $this-gt;belongsTo(JobSchedule::class); } }