Laravel | Google API：如何迭代特定 id 的地图

Question

我在如何显示不同的地图 ID 方面遇到问题。我想显示特定的谷歌地图及其各自的标记，但我得到的只是谷歌地图，但没有标记或显示谷歌地图和标记，但仅显示在迭代的最后一个地图 ID 上。

这是我的地图，位于 foreach 循环内

<div id="map{{ $address->id }}" style="width: 465px; height: 400px;"></div>

Javascript：

<script>
    function initMaps() {
        var mapOptions = {
            center: { lat: 15.0742, lng: 120.6881 },
            zoom: 12,
            mapTypeId: 'terrain'
        };
        var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);
        
        var marker = new google.maps.Marker({
            position: { lat: 15.0742, lng: 120.6881 },
            map: map,
            draggable: true,
            street_address: document.getElementById('street_address').value
        });

        marker.addListener('dragend', function (event) {
            var userID = document.getElementById('userID').value;
            var newLat = event.latLng.lat();
            var newLng = event.latLng.lng();
            var newStreetAddress = document.getElementById('street_address').value;
            
            console.log('Session: ' + userID ,' New Street Address: ' + newStreetAddress, ' New Latitude: ' + newLat, ' New Longitude: ' + newLng);

            setTimeout(function() {
                var Lat = newLat;
                var Lng = newLng;
                document.getElementById('latitude2').value = Lat;
                document.getElementById('longitude2').value = Lng;
            }, 2000);

        });
    }

    google.maps.event.addDomListener(window, 'load', initMaps);
</script>

我有一个像这样 foreach javascript 的想法，但仍然行不通。

@foreach($addresses as $address)
var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);
        
        var marker = new google.maps.Marker({
            position: { lat: {{ $address->lat }}, lng: {{ $address->lng }} },
            map: map,
            draggable: true,
            street_address: document.getElementById('street_address').value
        });
@endforeach

Answer 1

我修好了

@foreach ($addresses as $address)
    

<script>
    function initMaps() {
    var mapOptions = {
        center: { lat: 15.0742, lng: 120.6881 },
        zoom: 12,
        mapTypeId: 'terrain'
    };

    var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);

    var marker = new google.maps.Marker({
        position: { lat: {{ $address->lat }}, lng: {{ $address->lng }} },
        map: map,
        draggable: true,
        street_address: document.getElementById('street_address').value
    });

    function updateCoordinates() {
        var userID = document.getElementById('userID').value;
        var currentLat = marker.getPosition().lat();
        var currentLng = marker.getPosition().lng();
        var currentStreetAddress = document.getElementById('street_address').value;

        console.log('Session: ' + userID, ' Current Street Address: ' + currentStreetAddress, ' Current Latitude: ' + currentLat, ' Current Longitude: ' + currentLng);

        var Lat = currentLat;
        var Lng = currentLng;
        document.getElementById('latitude{{ $address->id }}').value = Lat;
        document.getElementById('longitude{{ $address->id }}').value = Lng;
    }

    marker.addListener('dragend', function (event) {
        var userID = document.getElementById('userID').value;
        var newLat = event.latLng.lat();
        var newLng = event.latLng.lng();
        var newStreetAddress = document.getElementById('street_address').value;

        console.log('Session: ' + userID, ' New Street Address: ' + newStreetAddress, ' New Latitude: ' + newLat, ' New Longitude: ' + newLng);

        setTimeout(updateCoordinates, 2000);
    });

    // Update coordinates every 2 seconds
    // setInterval(updateCoordinates, 2000);
}

google.maps.event.addDomListener(window, 'load', initMaps);

</script>
@endforeach

Answer 2

根据缩放级别，某些细节不会显示，以免掩盖其他细节。

例如，在低比例（小比例）下，有意义的等高线会太密集，并且会遮挡地形的阴影。