Javascript 传递JSON后未创建标记_Javascript_Python_Json_Google App Engine_Google Maps Api 3

Javascript 传递JSON后未创建标记

javascript python json google-app-engine google-maps-api-3

Javascript 传递JSON后未创建标记,javascript,python,json,google-app-engine,google-maps-api-3,Javascript,Python,Json,Google App Engine,Google Maps Api 3,在Roberto提供的帮助后编辑： Python新手。该应用程序在前端使用Maps Javascript API v3。后端是webapp2/GAE。我假设我也没有正确地处理json。传递JSON后未正确创建标记 q = Building.query() buildings = q.fetch() some_json = [] for building in buildings: some_json.append(OrderedDict([('la

在Roberto提供的帮助后编辑：

Python新手。该应用程序在前端使用Maps Javascript API v3。后端是webapp2/GAE。我假设我也没有正确地处理json。传递JSON后未正确创建标记

    q = Building.query()
    buildings = q.fetch()
    some_json = []
    for building in buildings:
        some_json.append(OrderedDict([('lat', float(building.lat)), ('lng', float(building.lng)), ('content', building.uuid)]))
    appended_json = json.dumps(some_json)

HTML:

即使输出不正确，也不会引发任何问题

编辑：

HTML浏览器看到的具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMfzvCXM-LUe43cZ0mB2iDxx4aNOySkrQ">
    </script>
    <script type="text/javascript">
function initialize() {
            var input_value = document.getElementById("lat").value;
            var converted_value = JSON.stringify(input_value);
            console.log(input_value);
            var json = JSON.parse(converted_value);
            console.log(json);
            var locations = json;

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][2]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    }
   google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div id="map-canvas"></div>
    <input id="lat" hidden="hidden" value="[{&quot;lat&quot;: 39.2831792, &quot;lng&quot;: -80.56741099999999, &quot;content&quot;: &quot;782f7100c13511e49f92ab5e18d4b38e&quot;}]">

  </body>
</html>


html，正文，#映射画布{高度：100%；边距：0；填充：0；}
函数初始化（）{
var input_value=document.getElementById（“lat”）.value；
var converted_value=JSON.stringify（输入_值）；
console.log（输入_值）；
var json=json.parse（转换的_值）；
log（json）；
var=json；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：10，
中心：新谷歌地图LatLng（-33.92151.25），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i

您的代码希望您的JSON如下所示：

[[39.2831792,-80.56741099999999,"782f7100c13511e49f92ab5e18d4b38e"]]

您的JSON看起来不像这样，它看起来像：

[{"lat": 39.2831792,"lng": -80.56741099999999,"content": "782f7100c13511e49f92ab5e18d4b38e"}];

更改代码以处理JSON格式：

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i].content);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

html，
身体，
#地图画布{
身高：100%；
保证金：0；
填充：0；
}

…还没有回复，所以你得和我谈谈。追加不一致是什么意思？Python中的标准词典没有排序。“但是每次输出都会不同”之后显示的两个输出与我相同，除非我忽略了什么。@Roberto我接受：）我的错，你是对的，它们是相同的，但是几乎每次我运行查询时顺序都不同。。实现订购的正确方法是什么？lat、lng、content？嗯，也许有一种选择是从集合中导入OrderedDict，然后

一些json.append（OrderedDict（[（'lat'，float（building.lat）），（'lng'，float（building.lng）），（'content'，building.uuid）]

，这解决了“一致性”问题，或者更好的说法是正确地订购了词典。谢谢！：）问题是什么？浏览器看到的HTML是什么样子的？JSON看起来像什么？请提供一个演示该问题的示例。我尝试了您提出的解决方案，但没有成功解决该问题。我尝试记录通过循环的过程，它通过了95次，因此我更改了

var locations=[json]

，然后它只通过了一次。但是，标记仍未显示：（我尝试手动将地图居中到传递的精确坐标。此外，如果我传递更多json信息，它仍然会显示一个，因此我假设我必须将其切分并修复。谢谢，这已经奏效。在将此答案标记为正确答案之前，我有一个问题。我如何让setContent创建一个链接，例如

href=“/viewbuilding”+位置[i].内容

？这是另一个问题。

[{"lat": 39.2831792,"lng": -80.56741099999999,"content": "782f7100c13511e49f92ab5e18d4b38e"}];

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i].content);
            infowindow.open(map, marker);
        }
    })(marker, i));
}