谷歌地图没有标记答案

【问题标题】：Google Maps does not have a marker谷歌地图没有标记
【发布时间】：2018-04-13 14:21:42
【问题描述】：

我想使用 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 Map Marker 会丢失。

除了不能加标记外，alert里面的值很奇怪

【问题讨论】：

您是否检查过浏览器中的 developer 工具控制台是否有错误 - alert 不是您调试代码的方式 - 尝试制作 lat 和 lon 数字而不是 new google.maps.LatLng(Number(data.lat), Number(data.lon)); - 不确定它是否会有所帮助

标签： javascript json google-maps-markers

【解决方案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>

所以我在您的代码中做了以下更改 -

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

现在它适用于我的静态数据。

【讨论】：