当我使用 loadJSON 加载谷歌地图标记时出现问题

Question

我使用 Google Maps Complex Markers 示例根据 Json 请求在某些地方放置标记。但我收到了这条消息：

未处理的 Promise Rejection: TypeError: undefined is not an object (evalating 'beaches.length')

我不清楚为什么 JSON 不加载。 我是 Javascript/JQuery 的新手，所以我需要帮助。

最初，变量 beaches 是在 initMap() 中输入的：

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];

我改为使用 iniMap() 函数之外的 loadJSON 调用来获取这些数据。

  var beaches;

  function setup() {
    loadJSON("getData.php", gotData, 'jsonp');
  }

  function gotData(data) {
    beaches = data;
  }

如您所见，出于安全原因，我使用了“jsonp”。我尝试清除它，但问题仍然存在。

为了呈现数据，执行此调用。问题出现在“beaches.lenght”中：

 for (var i = 0; i < beaches.length; i++) {
      var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat: beach[1], lng: beach[2]},
        map: map,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
      });
    }

如果有任何帮助，我将不胜感激......

Answer 1

已编辑

对于变量海滩，您必须使用 JSON 格式。 read this

将海滩改成这样：

var beaches = 
    [{
      "title" : "Bondi Beach",
      "lat" : -33.890542,
      "lng" : 151.274856,
      "zindex" : 4
    },...]

还有： 您必须使用 google.maps.LatLng 对象作为 marker 对象中 position 索引的值

var pos = new google.maps.LatLng(beach.lat, beach.lng);
var marker = new google.maps.Marker({
    position : pos ,
    map: map,
    shape: shape,
    title: beach.title,
    zIndex: beach.zindex
})