【问题标题】：Google Maps API JS Marker - Django谷歌地图 API JS 标记 - Django
【发布时间】：2017-12-11 01:39:44
【问题描述】：

在 Django 中，我试图通过使用视图中的信息呈现模板来填充 google maps api。

我可以将结果返回到模板，但是我在使用 Django 将其实现到 javascript 标记中时遇到了困难。任何建议。

我希望django数据返回到JS中的addmarker函数中

Python - Django 视图

    def maps_multi(request):

        address_list = CustomerOrder.objects.filter(city__icontains = 'CA').distinct() # pulls all unique addresses in California
        address_list1 = address_list[0:3] # temporarily select first three addresses from list to test

        geolocator = GoogleV3()

        add_list=[]
        for x in address_list1:
            add_city = x.city
            location = geolocator.geocode(add_city)
            add_list.append(location)
            print(add_list)

        context = {'location': add_list}

        return render(request, 'orderdisplay/maps_multi.html', context)

//JAVASCRIPT

      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);


      // INSERT Lat Lng via django here
      addMarker({coords:{lat:33.6846, lng:-117.8265}});
      addMarker({coords:{lat:34.0522, lng:-118.2437}});
      addMarker({coords:{lat:33.9533, lng:-117.3962}});



      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position: props.coords,
          map:map,
          icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        });

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

【问题讨论】：

标签： javascript django google-maps

【解决方案1】：

我假设您的 js 代码放置在您的 orderdisplay/maps_multi.html 模板中。然后你可以简单地这样做：

// New map
var map = ...

// INSERT Lat Lng via django here

{% for location in add_list %}
    addMarker({coords:{
        lat: {{ location.latitude|stringformat:'f' }}, 
        lng: {{ location.longitude|stringformat:'f' }}
        }
    });
{% endfor %}

【讨论】：