Json值不检索

时间:2013-10-19 12:05:08

标签: jquery json google-maps-markers

我正在使用本地json文件在google地图中显示GeoMap位置..我可以正确显示地图但不显示其中的标记位置..请帮助

这是我的代码

var json;

$(document).ready(function(){
var map; var infowindow;
 var jsonData = '[{ "id" : "1" , "Lat" : "-36.847043" ,"Lng" :"174.761543"},{ "id" : 
"2" 
  , "Lat" : "-37.791174" ,"Lng" :"175.297813"},{ "id" : "3" ,  "Lat" : "-38.679988" 
 ,"Lng" :"176.077843"},{ "id" : "4" , "Lat" : "-41.297257" ,"Lng" :"174.759483"} ]';
    //alert(jsonData);
     json = $.parseJSON(jsonData);
   });

   function InitializeMap() {
var Lat="-36.847043";
var Lng="174.761543";
    var latlng = new google.maps.LatLng(Lat,Lng);
    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map"), myOptions);
     }

function markicons() {
   InitializeMap();

var ltlng = [];

alert(json);
console.log(json.Lat);
    for (var i=0; i <=json.length; i++)
    {
    alert(LatLng);
    ltlng.push(new google.maps.LatLng(json[i].Lat, json[i].Lng));
    }


    //ltlng.push(new google.maps.LatLng(-36.847043, 174.761543));
   // ltlng.push(new google.maps.LatLng(-37.791174,175.297813));
   // ltlng.push(new google.maps.LatLng(-38.679988,176.077843));
   // ltlng.push(new google.maps.LatLng(-41.297257,174.759483));

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

        (function (i, marker) {

            google.maps.event.addListener(marker, 'click', function () {

                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }

                infowindow.setContent("Message" + i);

                infowindow.open(map, marker);

            });

        })(i, marker);

    }

}

window.onload = markicons; 

当我安装它时,这是我的错误:

  

未捕获的ReferenceError:未定义LatLng

帮助 - 提前谢谢

1 个答案:

答案 0 :(得分:0)

您已定义 latlng 而非 LatLng 尝试以下内容:

for (var i = 0; i <= json.length; i++) {

    ltlng.push(new google.maps.LatLng(json[i].Lat, json[i].Lng));
    alert(ltlng[i]);
}

或者如果您需要var latlng = new google.maps.LatLng(Lat,Lng); 警报中的 latlng 值,然后首先必须更改变量名称并使用全局范围声明latlng。

试试这个:

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

        var map = new google.maps.Map(document.getElementById("map"), {
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                center : new google.maps.LatLng(-36.847043, 174.761543),
                zoom : 6
            });

        var infowindow = new google.maps.InfoWindow({
                content : "holding..."
            });

        var jsonData = '[{ "id" : "1", "Lat" : "-36.847043", "Lng" :"174.761543"},'
             + '{ "id" : "2", "Lat" : "-37.791174", "Lng" :"175.297813"},'
             + '{ "id" : "3", "Lat" : "-38.679988", "Lng" :"176.077843"},'
             + '{ "id" : "4", "Lat" : "-41.297257", "Lng" :"174.759483"} ]';

        var json = $.parseJSON(jsonData);

        var ltlng = [];

        for (var i = 0; i < json.length; i++) {
            ltlng.push(new google.maps.LatLng(json[i].Lat, json[i].Lng));
        }

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

            (function (i, marker) {

                google.maps.event.addListener(marker, 'click', function () {

                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    infowindow.setContent("Message" + i);

                    infowindow.open(map, marker);

                });

            })(i, marker);
        }
    }

    google.maps.event.addDomListener(window, 'load', markicons);

</script>

Html:

<div id="map" style="width:700px;height:700px;"></div> 

<强> Demo