javascript - 外部 JSON 文件的标记未显示在谷歌地图中

Question

我有一个要在 map 上显示的 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)."
  }]

但是当我运行代码时，会显示 map ，但看不到任何标记!出了什么问题吗？ 引用: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