javascript Laravel| Google API：如何使用特定IDMap[已关闭]

abithluo 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(81)

已关闭。此问题需要更多focused。目前不接受回答。
**要改进此问题吗？**更新此问题，使其仅针对editing this post的一个问题。

2天前关闭。
Improve this question的
我有关于如何显示不同的MapID的问题。我想显示特定的谷歌Map与其各自的标记，但我得到的是谷歌Map，但没有标记或谷歌Map和标记显示，但只有在最后的MapID是迭代。
这是我的map，它位于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

型

JavaScript

来源：https://stackoverflow.com/questions/77469090/laravel-google-api-how-to-iterate-map-of-specific-id

2条答案

按热度按时间

czq61nw11#

我修复了它

@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

字符串

赞(0）回复(0）举报 2023-11-15

nbnkbykc2#

根据缩放级别，某些细节不会显示，以免模糊其他细节。
例如，在低比例（小比例）下，有意义的等高线将过于密集，并会模糊地形的着色。

赞(0）回复(0）举报 2023-11-15