Google 地图没有标记

Question

我想使用 JSON 文件在 Google 地图上显示标记，但标记没有显示。

start.jsp

<!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=MyKey&sensor=ture">
</script>
<script type="text/javascript">
  var map;
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(36.771212, 126.935475),
      zoom: 16,
      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("data.json", function(json1) {
        $.each(json1.fireturk, function(key, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lon);
            alert(latLng);
        // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
            position: latLng,
            //map: map,
            title: "hello!!"
            });
            marker.setMap(map);
            //alert(data.lat, data.lon);
          });
        });
      });
    </script>
  </body>
</html>

data.json

{
 "fireturk": [
   {"lat": "36.771212", "lon": "126.935475"},
   {"lat": "36.771252", "lon": "126.935505"},
   {"lat": "36.771288", "lon": "126.935595"}
   ]
}

我不知道为什么 Google 地图标记丢失。

除了无法添加标记外，alert中的值也很奇怪

Answer 1

<!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=myKey&sensor=false">
    </script>
    <script type="text/javascript">
    var map;

    function setMarker() {
        $.getJSON("data.json", function(json1) {
            $.each(json1.fireturk, function(key, data) {
                var latLng = new google.maps.LatLng(parseFloat(data.lat), parseFloat(data.lon));
                alert(latLng);
                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    //map: map,
                    title: "hello!!"
                });
                marker.setMap(map);
                //alert(data.lat, data.lon);
            });
        });
    }

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(36.771212, 126.935475),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        setMarker();
    }
    </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>
</body>

</html>

So I did following changes in your code -

我删除了带有 document.ready 函数的脚本标签，并将该代码移动到 setMarker 函数中，并从初始化函数中调用了 setMarker 函数（最后）。
parseFloat 你的 $.each 循环中的 latlong。
将传感器设置为假。

And now it works for me for the static data.

Google 地图没有标记

Google Maps does not have a marker

javascript

json

google-maps-markers