Динамически карта Google с несколькими маркерами не отображается с Django - PullRequest
Новая
       6

Динамически карта Google с несколькими маркерами не отображается с Django

0 голосов
/ 13 декабря 2018

У меня есть имя класса модели Restaurant с широтой и долготой, и я уже вставил много данных в этот класс, и по этим полям я хочу показать несколько маркеров карты Google. 

# restaurant.html

<div id="map"></div>
    {% for i in restaurents %}
    <script>

    var locations = [
    [{{ i.restaurant }}, {{ i.latitude }}, {{ i.longitude }}, {{ i.id }}]
];


    {#var locations = [#}
{#    ['Bondi Beach', -33.890542, 151.274856, 4],#}
{#    ['Coogee Beach', -33.923036, 151.259052, 5],#}
{#    ['Cronulla Beach', -34.028249, 151.157507, 3],#}
{#    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],#}
{#    ['Maroubra Beach', -33.950198, 151.259302, 1]#}
{#];#}


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqEz7ozYxKa53JAeN4GFN2HfilyiFCbvw&callback=initMap">
    </script>
    {% endfor %}

Изначально я определилнекоторые данные, и это работает хорошо, что закомментировано в этом коде.Но когда я извлекал данные с помощью циклов из моей базы данных, карта не работает.Я не понимаю, откуда и как я могу получить доступ к этим данным.

доступ 

var locations = [
        [{{ i.restaurant }}, {{ i.latitude }}, {{ i.longitude }}, {{ i.id }}]
    ];

много раз я искал и тоже получил ответ, но не работает должным образом.Спасибо за продвижение.

1 Ответ

0 голосов
/ 14 декабря 2018 
{% for i in restaurents %}
<div id="map" style="padding-bottom: 140px; padding-top: 140px"></div>
<script>
    function initMap() {
        var locations = [];
        locations.push({name: {{ i.restaurant }}, latlng: new google.maps.LatLng( {{ i.latitude }}, {{ i.longitude }}) });
        locations.push({name: 'Bondi Beach', latlng: new google.maps.LatLng( -33.890542, 151.274856) });
        locations.push({name: 'Coogee Beach', latlng: new google.maps.LatLng( -33.923036, 151.259052) });
        var uluru = { lat: {{ i.latitude }}, lng: {{ i.longitude }} };
        var map = new google.maps.Map(
        document.getElementById('map'), {zoom: 8, center: uluru});
        for(var j=0; j<locations.length; j++){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng({position: locations[j].latlng, map: map, title: locations[j].name}),
                });
            bounds.extend(locations[j].latlng);
        }
    }


</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqEz7ozYxKa53JAeN4GFN2HfilyiFCbvw&callback=initMap">
</script>
{% endfor %}

Несколько шагов я уже выполнил.Например приведенный выше код.Когда я собираюсь получить доступ к этим данным, тогда не работает, но если я первоначально определяю эти данные, это работает нормально.

...