Laravel 和谷歌地图的刀片问题

问题描述

大家下午好！！！

我告诉你，我正在尝试在 laravel 制作的页面的标题中实现一个谷歌地图搜索引擎......使用我当前的脚本，我设法让它只在内容中完美运行，而不是在标题菜单中页面的。 ..

例如，如果我创建“search.blade.PHP”

    @extends('land.layouts.app')
    @section('content')
        <div class="form-group">
            <label for="address_address">Address</label>
            <input type="text" id="address-input" name="address_address" class="form-control map-input">
            <input type="text" name="address_latitude" id="address-latitude" value="0" />
            <input type="text" name="address_longitude" id="address-longitude" value="0" />
        </div>
        <div id="address-map-container" style="width:100%;height:400px; ">
            <div style="width: 100%; height: 100%" id="address-map"></div>
        </div>
        
        @section('scripts')
            @parent
            <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize" async defer></script>
            <script src="/js/mapInput.js"></script>
        @stop
    
    @endsection

并且我在 app.blade.PHP 中添加了 @yield ('scripts')，这很完美，当我输入 domain.com/search 时，如果我输入 domain.com/search，在查找地址时纬度和 logntud 会毫无问题地出现在字段中

好的，但现在我需要把这个搜索引擎放在菜单的顶部。

在 index.blade.PHP 中使用 @yield ('search') 和 @section ('search') 进行探测 ...

通过 @include ('land.search') 进行探测

在这两种情况下，它都会显示搜索引擎、2 个纬度和经度字段……当我查找地址时，它会在地图上正确显示它，但没有更多，但它没有将坐标放在纬度和经度中经度字段，有人能告诉我它是邪恶的吗？

.js 文件

    function initialize() {
    
        $('form').on('keyup keypress',function(e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });
        const locationInputs = document.getElementsByClassName("map-input");
    
        const autocompletes = [];
        const geocoder = new google.maps.Geocoder;
        for (let i = 0; i < locationInputs.length; i++) {
    
            const input = locationInputs[i];
            const fieldKey = input.id.replace("-input","");
            const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';
    
            const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || -33.8688;
            const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 151.2195;
    
            const map = new google.maps.Map(document.getElementById(fieldKey + '-map'),{
                center: {lat: latitude,lng: longitude},zoom: 13
            });
            const marker = new google.maps.Marker({
                map: map,position: {lat: latitude,});
    
            marker.setVisible(isEdit);
    
            const autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.key = fieldKey;
            autocompletes.push({input: input,map: map,marker: marker,autocomplete: autocomplete});
        }
    
        for (let i = 0; i < autocompletes.length; i++) {
            const input = autocompletes[i].input;
            const autocomplete = autocompletes[i].autocomplete;
            const map = autocompletes[i].map;
            const marker = autocompletes[i].marker;
    
            google.maps.event.addListener(autocomplete,'place_changed',function () {
                marker.setVisible(false);
                const place = autocomplete.getPlace();
    
                geocoder.geocode({'placeId': place.place_id},function (results,status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        const lat = results[0].geometry.location.lat();
                        const lng = results[0].geometry.location.lng();
                        setLocationCoordinates(autocomplete.key,lat,lng);
                    }
                });
    
                if (!place.geometry) {
                    window.alert("No details available for input: '" + place.name + "'");
                    input.value = "";
                    return;
                }
    
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
    
            });
        }
    }
    
    function setLocationCoordinates(key,lng) {
        const latitudeField = document.getElementById(key + "-" + "latitude");
        const longitudeField = document.getElementById(key + "-" + "longitude");
        latitudeField.value = lat;
        longitudeField.value = lng;
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）