访问权限

Question

我有一个模型类名称为Latitude和Longitude的餐厅，并已在此类中插入许多数据，并且通过这些字段，我想显示Google地图的多个标记。

endpoint

最初，我已经定义了一些数据，并且在此代码中已注释掉它，并且工作良好。但是，当我通过循环从数据库中检索数据时，map无法正常工作。我不知道从何处以及如何访问这些数据。

访问权限

# 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 %}

我搜索了很多次，也得到了一些答案，但是不能正常工作。感谢前进。

Answer 1

{% 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 %}

我已经遵循的几种步骤。例如上面的代码。当我要访问该数据时，它将无法正常工作，但是如果我最初定义了这些数据，它将可以正常工作。

动态多标记Google地图未与Django一起显示

访问权限

1 个答案: