标记不显示在外部JSON文件的谷歌地图

Question

我有一个crime_map.txt文件显示在地图上。 我HTML：

<div id="crime-map" style="width: 100%; height: 400px"></div> 

和Javascript：

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true"> 
</script> 
<script type="text/javascript"> 
    initialize(); 

    var map; 
    function initialize() { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center : new google.maps.LatLng(26.152891, 91.781718) 
     }; 
     map = new google.maps.Map(document.getElementById("crime-map"),mapOptions); 
    } 
</script> 

<script> 
$(document).ready(function() { 
    $.getJSON("crime_points.txt", 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.title 
     }); 
     marker.setMap(map); 

     //console.log(marker); 
     }); 
    }); 
}); 
</script> 

而且crime_map.txt：

[{ 
    "title": "Stockholm", 
    "lat": 26.17189, 
    "lng": 91.7645983333333, 
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
    }, 
    { 
    "title": "Oslo", 
    "lat": 26.1717463, 
    "lng": 91.7645724, 
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
    }, 
    { 
    "title": "Copenhagen", 
    "lat": 26.1444045, 
    "lng": 91.7860568, 
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
    }] 

但是当我运行的代码，地图显示，但无法看到任何标记那里 ！怎么了？ REF：StackOvrflow Link

编辑为：

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

    var map; 
    function initialize() { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center : new google.maps.LatLng(26.152891, 91.781718) 
     }; 
     map = new google.maps.Map(document.getElementById("crime-map"),mapOptions); 
    } 

$(document).ready(function() { 
    console.log(map); 
    $.getJSON("crime_points.txt", 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.title 
     }); 
     marker.setMap(map); 

     //console.log(marker); 
     }); 
    }); 
}); 
</script> 

Answer 1

使一个脚本，你不能声明一个变量，并从另一个脚本得到它。根据你的代码结构，这是我为你做的最接近的解决方案。试试让我知道这是否有效。

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

var map; 

function initialize() 
{ 
    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center : new google.maps.LatLng(26.152891, 91.781718) 
    }; 
    map = new google.maps.Map(document.getElementById("crime-map"),mapOptions); 


$.getJSON("crime_points.txt", function(json1) { 
    $.each(json1, function(key, data) { 
    var latLng = new google.maps.LatLng(data.lat, data.lng); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     title: data.title 
    }); 
    marker.setMap(map); 

    //console.log(marker); 
    }); 
}); 


} 
</script> 

这里是使用JSON活代码示例，看看live demo