MarkerClusterer 示例在所有内容都是教程的精确副本后不显示标记答案

【问题标题】：MarkerClusterer example not showing markers after everything is exact copy of tutorialMarkerClusterer 示例在所有内容都是教程的精确副本后不显示标记
【发布时间】：2012-10-02 15:12:54
【问题描述】：

我从Google marker clusterer example here 复制了所有内容，只是更改了我想要使用的点的数据，标记不会显示在我的地图上。知道为什么（下面的代码）？

Chrome 给了我一个警告

"资源被解释为脚本，但通过 MIME ...等传输..."...data.json"

但是，我使用 document.write(data[i].lat) 等打印了数据，一切都打印得很好......

<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClusterer v3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }

    </style>

    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      //document.write(script);
      //document.write(data1);
      //var obj = jQuery.getJSON("data.json");
       document.write(data[0].lat);
      //alert( obj.name === "lat" );
    </script>

        <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 2; i++) {
          //var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(data.lat,
              data.lon);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (5 markers)</h3>
    <p>
      <a href="?compiled">Compiled</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

这是 data.json 文件的内容...

var data = [{"lat":37.4419,"lon":37.4419}, {"lat":37.4419,"lon":50.36}, {"lat":37.4419,"lon":137.4419}];

【问题讨论】：

标签： javascript json google-maps google-maps-api-3 markerclusterer

【解决方案1】：

你问：

我在这里复制了 Google 标记聚类器示例中的所有内容，然后只是改变了点的数据

（标题说“一切都是教程的精确副本）

（不是）

知道为什么吗？

你改变了什么：

data.lat 和 data.lon 未定义。

你想使用 data[i].lat 和 data[i].lon

Working example

【讨论】：

哇！非常感谢你，说真的，你是我的英雄。我已经摸索了一个小时，无法理解我做错了什么，它就在我面前！！