Javascript：在Google地图上使用json文件添加标记

我想为使用Google地图的新加坡添加巴士站标记。我的代码：Javascript：在Google地图上使用json文件添加标记

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <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://maps.googleapis.com/maps/api/js? key=AIzaSyB_rFf5Ow4UXIxmXtRXMvVbfIinBSWDc7o&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    var map; 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(1.290270,103.851959), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery- latest.min.js"></script>  
    </head> 
    <body onload="initialize()" > 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.getJSON("bus-stops.json", function(json1) { 
     $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      title: data.name 
     }); 
     marker.setMap(map); 
     }); 
    }); 
    }); 
</script>

我已经把总线stops.json在同一文件夹作为此文件。该代码仅显示没有标记的Google地图。数据如下所示：

[{"no":"10009","lat":"1.28210155945393","lng":"103.81722480263163","name":"Bt Merah Int"},{"no":"10011","lat":"1.2777380589964","lng":"103.83749709165197","name":"Opp New Bridge Rd Ter"}]

请告诉我我要去哪里。谢谢

来源

2016-12-05 Somnath Banerjee

您能查看它的正确读取文件，IE浏览器'json1'有一个值，并正确地做了'.each'循环遍历你所期望的，如果你把'控制台中的所有行.log（数据）'里面呢？ – duncan

我把一个console.log（数据），它在控制台上使用Mozilla上的萤火虫没有显示。猜json1没有得到任何价值。请建议。 –

是你的jQuery文件加载？在你的代码中，你将文件引用为“jquery- latest.min.js”，这是不正确的（文件名中没有空格） – duncan

最有可能的时机问题。从初始化函数调用异步$.getJSON函数，或处理映射在运行时未初始化的情况。

var map; 
function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(1.290270, 103.851959), 
    zoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
    mapOptions); 
    $.getJSON("bus-stops.json", function(json1) { 
    $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     title: data.name 
     }); 
     marker.setMap(map); 
    }); 
    }); 
}

来源

2016-12-05 15:16:03 geocodezip

谢谢，先生！这确实有帮助，我正确地得到了情节。再次感谢。 –

Javascript：在Google地图上使用json文件添加标记

回答

相关问题