標記不顯示在外部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