为什么我的 Google Map 不显示我的标记？

Question

我使用 gmaps.geocode python 库来生成这个：

[{'address_components': [{'long_name': '900', 'short_name': '900', 'types': ['street_number']}, {'long_name': 'West Wall Street', 'short_name': 'W Wall St', 'types': ['route']}, {'long_name': 'Janesville', 'short_name': 'Janesville', 'types': ['locality', 'political']}, {'long_name': 'Rock County', 'short_name': 'Rock County', 'types': ['administrative_area_level_2', 'political']}, {'long_name': 'Wisconsin', 'short_name': 'WI', 'types': ['administrative_area_level_1', 'political']}, {'long_name': 'United States', 'short_name': 'US', 'types': ['country', 'political']}, {'long_name': '53548', 'short_name': '53548', 'types': ['postal_code']}, {'long_name': '3574', 'short_name': '3574', 'types': ['postal_code_suffix']}], 'formatted_address': '900 W Wall St, Janesville, WI 53548, USA', 'geometry': {'location': {'lat': 42.6803769, 'lng': -89.03211}, 'location_type': 'RANGE_INTERPOLATED', 'viewport': {'northeast': {'lat': 42.6817258802915, 'lng': -89.0307610197085}, 'southwest': {'lat': 42.6790279197085, 'lng': -89.03345898029151}}}, 'place_id': 'Eig5MDAgVyBXYWxsIFN0LCBKYW5lc3ZpbGxlLCBXSSA1MzU0OCwgVVNBIhsSGQoUChIJFzIpc5QZBogRoK3T0RxPudkQhAc', 'types': ['street_address']}]

使用 Django 我可以为保存在我的数据库中的每个列表吐出这些数据。 在我的 map 上显示每个地理编码地址的最佳方法是什么：html：

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 400px; /* The height is 400 pixels */
            width: 100%; /* The width is the width of the web page */
        }
    </style>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
        // Initialize and add the map
        function initMap() {
            var map = new google.maps.Map(
                document.getElementById('map'), {zoom: 4, center: {'lat': 42.6803769, 'lng': -89.03211}}});
            {% for Listing in posts %}
                new google.maps.Marker({position: {{ Listing.geo }}, map: map});
            {% endfor %}
        }
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
    </script>
{% endblock %}

我当前的代码应该在我的 map 上输出每个地址作为标记，但我的 map 甚至没有出现，所以我显然打破了一些东西。 前端不是我最喜欢的，所以请告诉我我做错了什么以及如何完成正确的 output。

{{ Listing.geo }} 输出我展示的第一个代码片段。

当我的 html 在浏览器中为 output 时，我的脚本如下所示：

    <script>
        // Initialize and add the map
        function initMap() {
            var map = new google.maps.Map(
                document.getElementById('map'), {zoom: 4, center: {'lat': 42.6803769, 'lng': -89.03211}});

                new google.maps.Marker({position: [{&#39;address_components&#39;: [{&#39;long_name&#39;: &#39;900&#39;, &#39;short_name&#39;: &#39;900&#39;, &#39;types&#39;: [&#39;street_number&#39;]}, {&#39;long_name&#39;: &#39;West Wall Street&#39;, &#39;short_name&#39;: &#39;W Wall St&#39;, &#39;types&#39;: [&#39;route&#39;]}, {&#39;long_name&#39;: &#39;Janesville&#39;, &#39;short_name&#39;: &#39;Janesville&#39;, &#39;types&#39;: [&#39;locality&#39;, &#39;political&#39;]}, {&#39;long_name&#39;: &#39;Rock County&#39;, &#39;short_name&#39;: &#39;Rock County&#39;, &#39;types&#39;: [&#39;administrative_area_level_2&#39;, &#39;political&#39;]}, {&#39;long_name&#39;: &#39;Wisconsin&#39;, &#39;short_name&#39;: &#39;WI&#39;, &#39;types&#39;: [&#39;administrative_area_level_1&#39;, &#39;political&#39;]}, {&#39;long_name&#39;: &#39;United States&#39;, &#39;short_name&#39;: &#39;US&#39;, &#39;types&#39;: [&#39;country&#39;, &#39;political&#39;]}, {&#39;long_name&#39;: &#39;53548&#39;, &#39;short_name&#39;: &#39;53548&#39;, &#39;types&#39;: [&#39;postal_code&#39;]}, {&#39;long_name&#39;: &#39;3574&#39;, &#39;short_name&#39;: &#39;3574&#39;, &#39;types&#39;: [&#39;postal_code_suffix&#39;]}], &#39;formatted_address&#39;: &#39;900 W Wall St, Janesville, WI 53548, USA&#39;, &#39;geometry&#39;: {&#39;location&#39;: {&#39;lat&#39;: 42.6803769, &#39;lng&#39;: -89.03211}, &#39;location_type&#39;: &#39;RANGE_INTERPOLATED&#39;, &#39;viewport&#39;: {&#39;northeast&#39;: {&#39;lat&#39;: 42.6817258802915, &#39;lng&#39;: -89.0307610197085}, &#39;southwest&#39;: {&#39;lat&#39;: 42.6790279197085, &#39;lng&#39;: -89.03345898029151}}}, &#39;place_id&#39;: &#39;Eig5MDAgVyBXYWxsIFN0LCBKYW5lc3ZpbGxlLCBXSSA1MzU0OCwgVVNBIhsSGQoUChIJFzIpc5QZBogRoK3T0RxPudkQhAc&#39;, &#39;types&#39;: [&#39;street_address&#39;]}], map: map});

        }
    </script>

这对我来说似乎不正确。

视图.py

def home(request):
    posts = Listing.objects.all().filter(is_live=1)
    context = {'posts': posts}
    return render(request, 'home.html', context)

@login_required
def post(request):
    if request.method == "POST":
        form = ListingForm(request.POST, request.FILES)
        if form.is_valid():
            post = form.save(commit=False)
            geo = gmaps.geocode(post.street_address + ", " + post.city + ", " + post.state)
            post.save()
            return redirect('post_view', pk=post.pk)
    else:
        form = ListingForm()
    return render(request, 'post.html', {'form': form})

Answer 1

从第一个片段来看，您应该使用{{ Listing[0].geometry.location|safe }}而不是{{ Listing.geo }}打印出非转义 json object