使用Google地图v3的JSON标记

时间:2014-10-20 14:01:47

标签: javascript json google-maps google-maps-api-3

我不明白为什么我的标记不会出现JSON 我想显示我的JSON文件中的所有标记 这是我的JSON文件的结构:

[{"number":31705,"name":"31705 - CHAMPEAUX (BAGNOLET)","address":"RUE DES CHAMPEAUX (PRES DE LA GARE ROUTIERE) - 93170 BAGNOLET","position":{"lat":48.8645278209514,"lng":2.416170724425901},"banking":true,"bonus":true,"status":"OPEN","contract_name":"Paris","bike_stands":50,"available_bike_stands":47,"available_bikes":3,"last_update":1413809069000},{"number":10042,"name":"10042 - POISSONNIÈRE - ENGHIEN","address":"52 RUE D'ENGHIEN / ANGLE RUE DU FAUBOURG POISSONIERE - 75010 PARIS","position":{"lat":48.87242006305313,"lng":2.348395236282807},"banking":true,"bonus":false,"status":"OPEN","contract_name":"Paris","bike_stands":33,"available_bike_stands":6,"available_bikes":27,"last_update":1413809252000}]

这是我的HTML

        <html>
        <head>
        <title>test</title>
        <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
        <script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false">

        </script>
        <script type="text/javascript">
        function initialize() {

        var mapOptions = {
        center: new google.maps.LatLng(42.5403, -78.53),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

          $.getJSON("test.json", function(data) {
                  $.each(data, function(key, data) {
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                        alert(myLatlng);
                        var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: "test"                 
                        });
                    });
        });
        }

        </script>
        </head>
        <body onload="initialize()">
        <form id="form1" runat="server">
        <div id="map_canvas" style="width: 500px; height: 400px"></div>
        </form>
        </body>
        </html>

但如果我测试这个JSON就行了

[{"lat":48.8645278209514,"lng":2.416170724425901},{"lat":48.87242006305313,"lng":2.348395236282807}]

1 个答案:

答案 0 :(得分:0)

您的JSON对象没有lat和lng属性,它们位于嵌套对象位置。 要获得坐标,您应该使用data.position.lat and data.position.lng