Question

提前感谢您提供的任何帮助！我正在尝试使用JSON数据在Google地图中创建标记。好消息是我以我需要的格式获取数据。坏消息是我是JSON的新手，我似乎无法将标记显示在地图上。从控制台的响应中，问题似乎是下面代码底部的mapInit行。

我尝试通过审核different markers on google maps v3，Using JSON markers in Google Maps API with Javascript和Google Maps API v3: Adding markers from an array doesn't work等解决方案来解决此问题。我也尝试在http://weareallrobots.com/demos/map.html和其他网站上复制示例，但我仍遇到问题。

我的代码：

    <script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

    function initialize() {
          var rendererOptions = {
          draggable: true,
          panel:document.getElementById('directions_panel')
         };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var mapOptions = {
              zoom: 6,
              center: chicago,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          directionsDisplay.setMap(map);

  // HERE'S WHERE PROBLEMS START

          $.getJSON("mapall.js", {}, function(data){
          $.each(data.masterlocation, function(i, item){
            $("#markers").append('<li><a href="#" rel="' + i + '">' + item.nickname + '</a></li>');
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.latitude, item.longitude),
                map: map_canvas,
                title: item.nickname
            });
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>"+ item.nickname +"</h3>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        });
    });
        }


    function calcRoute() {
    UNRELATED ROUTING CODE HERE  
        }

    // HERE'S WHERE MORE PROBLEMS START

$(function(){
    // initialize map (create markers, infowindows and list)
    mapInit();

    // "live" bind click event
    $("#markers a").live("click", function(){
        var i = $(this).attr("rel");
        // this next line closes all open infowindows before opening the selected one
        //for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
        arrInfoWindows[i].open(map, arrMarkers[i]);
    });
});


    </script>

我的JSON数据

    [{"masterlocation":{"latitude":"33.5","nickname":"First","longitude":"-86.8"}},{"masterlocation":{"latitude":"34.7","nickname":"Second","longitude":"-86.6"}},

更新1

根据geocodezip和Adam的评论，我已将代码更新到下面。我在纬度和经度之前添加了+符号，并用initialize替换了mapInit。但是，我还没有得到任何标记出现。 Firebug告诉我，我的jQuery文件中有错误，但我不确定这些是否相关。谢谢你坚持我！

代码：

    // HERE'S WHERE PROBLEMS START

      $.getJSON("mapall.js", {}, function(data){
      $.each(data.masterlocation, function(i, item){
        $("#markers").append('<li><a href="#" rel="' + i + '">' + item.nickname + '</a></li>');
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(+item.latitude, +item.longitude),
            map: map_canvas,
            title: item.nickname
        });
        arrMarkers[i] = marker;
        var infowindow = new google.maps.InfoWindow({
            content: "<h3>"+ item.nickname +"</h3>"
        });
        arrInfoWindows[i] = infowindow;
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    });
});
    }


function calcRoute() {
UNRELATED ROUTING CODE HERE  
    }

    // HERE'S WHERE MORE PROBLEMS START

    $(function(){
    // initialize map (create markers, infowindows and list)
    initialize();

    // "live" bind click event
    $("#markers a").live("click", function(){
    var i = $(this).attr("rel");
    // this next line closes all open infowindows before opening the selected one
    //for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
    arrInfoWindows[i].open(map, arrMarkers[i]);
    });
    });

JQuery错误

    TypeError: a is undefined
    [Break On This Error]   

    ...rn a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){...

    jquery.js (line 29)
    TypeError: a is undefined
    [Break On This Error]   

    ...rn a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){...

更新2

我目前的代码如下，以及我在控制台中收到的错误代码。我重新加载页面时出现了新的错误，它们引用了我的javascript中首先出现函数初始化的行。也许这就是问题？

此外，问题是否可能在JSON中？每个JSON条目前面都有MYSQL表的名称，“Masterlocation”（见上文）。在我看过的其他JSON示例中，术语出现在“。”之后。在“$ .each（data.masterlocation）”中只出现一次。

我的Javascript：

    <script>
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    function initialize() {
    var rendererOptions = {
    draggable: true,
    panel:document.getElementById('directions_panel')
    };
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
$.getJSON("mapall.js", {}, function(data){
console.log(data);
$.each(data.masterlocation, function(i, item){
console.log(item);
    $("#markers").append('<li><a href="#" rel="' + i + '">' + item.nickname + '</a></li>');
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(+item.latitude, +item.longitude),
    map: map,
    title: item.nickname
    });
    arrMarkers[i] = marker;
    var infowindow = new google.maps.InfoWindow({
        content: "<h3>"+ item.nickname +"</h3>"
    });
    arrInfoWindows[i] = infowindow;
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    });
    });
    });
    }

    function calcRoute() {
    ROUTING CODE

    var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: optimize,
    travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    var route = response.routes[0];
    var summaryPanel = document.getElementById("directions_panel");                                              
}

$(function(){
// initialize map (create markers, infowindows and list)
initialize();

// "live" bind click event
$("#markers a").live("click", function(){
var i = $(this).attr("rel");
// this next line closes all open infowindows before opening the selected one
//for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
});
});

</script>

来自控制台的Javascript错误：这些错误仅在我重新加载页面后发生。

    Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:29
    c.extend.each jquery.js:29
    (anonymous function) mapall:87
    b jquery.js:121
    w.onreadystatechange jquery.js:127

    Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:29
    c.extend.each jquery.js:29
    (anonymous function) mapall:87
    b jquery.js:121
    w.onreadystatechange jquery.js:127

Answer 1

确保纬度和经度实际上是JS中的数字，而不是字符串。

要进行类型转换，只需在字符串

前加一个+

position: new google.maps.LatLng(+item.latitude, +item.longitude)

出于某种原因，谷歌的API没有足够智能地处理传递包含数字的字符串....去图。

修改

同样对你的帖子发表评论 - 你正在调用一个函数mapInit（），但你应该从它的外观调用函数initialize（）。

<强> EDIT2

这一行：

map: map_canvas,

应该是

map: map,

Answer 2

除了任何其他错误之外，您访问JSON数据的方式与该数据的格式不匹配。

您访问JSON数据的代码是：

$.getJSON( "mapall.js", {}, function( data ) {
    $.each( data.masterlocation, function( i, item ) {
        ... use item.nickname, item.latitude, and item.longitude here
    });
});

现在该代码没有任何问题，如果 JSON数据如下所示：

{
    "masterlocation": [
        {
            "nickname": "First",
            "latitude": 33.5,
            "longitude": -86.8
        },
        {
            "nickname": "Second",
            "latitude": 34.7,
            "longitude": -86.6
        }
    ]
}

此JSON数据是一个具有名为masterlocation的单个属性的对象。该属性是一个对象数组，每个对象包含nickname，一个字符串，latitude和longitude，两个数字。

这是布置JSON数据的一种非常明智的方法。我自己会做同样的事情。（我能想到的唯一改变的是命名约定：我可能会使用locations之类的名称而不是masterlocation，因为我喜欢看到数组的复数名称，我喜欢更短的名字对于常用属性，例如name，lat和lng。但这纯粹是一种风格问题 - 我使用的结构与名称相同。）

不幸的是，您的实际JSON数据如下所示：

[
    {
        "masterlocation": {
            "latitude": "33.5",
            "nickname": "First",
            "longitude": "-86.8"
        }
    },
    {
        "masterlocation": {
            "latitude": "34.7",
            "nickname": "Second",
            "longitude": "-86.6"
        }
    }
]

这是两个元素的数组。每个元素都是一个对象，其中一个属性名为masterlocation。每个masterlocation对象都包含nickname，latitude和longitude属性。而latitude和longitude是字符串而不是数字应该是。

更改代码以使用此结构非常容易：

$.getJSON( "mapall.js", {}, function( data ) {
    $.each( data, function( i, item ) {
        var loc = item.masterlocation;
        ... use loc.nickname, +loc.latitude, and +loc.longitude here
    });
});

但是如果您可以选择更改JSON格式的格式，我会这样做。您在JavaScript代码中有正确的想法，只需更改JSON输出即可匹配。

无法从JSON将标记加载到Google Maps API中

2 个答案: