Question

我正在关注本教程：http://www.youtube.com/watch?v=7mkOVjRz3tg 但是从我的数据库中获取信息而我的地图只是显示为没有地图的白色屏幕。我有一个在Android应用程序上运行，但后来我有太多的点来描绘Android应用程序停止工作，所以我试图使它成为一个Web界面。任何帮助，将不胜感激。这也是我第一次处理js json的片段看起来像：

{
  "coords": [
    {
      "latitude": "33.702908",
      "longitude": "-86.370771",
      "id": ""
    },
    {
      "latitude": 0,
      "longitude": 0,
      "id": "(null)"
    },
    {
      "latitude": "0.000000",
      "longitude": "0.000000",
      "id": "00004561-CE13-4125-A244-989D2E984A91"
    },
    {
      "latitude": "33.273388",
      "longitude": "-86.832977",
      "id": "0000F355-43B0-4164-9CD4-0D7C57A1B37C"
    }
  ]
}

Html + js

    <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Simple markers</title>
  <style>
  html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script src="jquery-1.10.2.min.js"></script>

  <script >

function getUserLocs(callback){
  $.getJSON('http://www.url.com', callback)
}

  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'H'
    });

    getUserLocs(function(data){
      var locs = data.coords;
      for (i in locs) {
        var lat = locs[i];
        var lon = locs[i];
        latLng = new google.maps.LatLng(lat, lon);

      var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: 'H'

      });

    }) LINE 51 this where the syntax error is
  }


  </script>
  <script>
    google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>
<body>
  <div id="map-canvas"></div>
</body>
</html>

错误：SyntaxError：语法错误map.html：51

Answer 1

创建标记后，您错过了一个“}”。

    getUserLocs(function(data){
      var locs = data.coords;
      for (i in locs) {
        var lat = locs[i];
        var lon = locs[i];
        latLng = new google.maps.LatLng(lat, lon);

        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: 'H'
        });
      }   // <-- here
    });

Answer 2

要从JSON映射标记，您需要更改代码：

    getUserLocs(function(data){
      var locs = data.coords;
      for (i in locs) {
        var lat = parseFloat(locs[i].latitude, 10);
        var lon = parseFloat(locs[i].longitude, 10);
        var latLng = new google.maps.LatLng(lat, lon);

        var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: 'H'
        });
      }
    });

http://googlemaps.googlermania.com/tmp/stackoverflow/21196413/test.html enter image description here

绘制标记时不会显示Google地图api v3

2 个答案: