在 javascript 循环中为地图标记显示 JSON 解析数据

Question

我正在尝试获取标记经度和纬度并将它们显示在地图上，但我没有得到任何结果，我的 parser.php 文件正在工作并从数据库中获取数据我只需要将其格式化为javascript

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -25.363882, lng: 131.044922},
      zoom: 14
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    $.getJSON('parser.php', function(items) {
        for (var i = 0; i < items.length; i++) {
            (function(item) {
                addMarker(item.lat, item.lon);
            })(items[i]);
        }
    });

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

parser.php 输出

[{"0":"33.880561","lat":"33.880561","1":"35.542831","lon":"35.542831"},{"0":"-25.363882","lat":"25.363882","1":"131.044922","lon":"131.044922"}]

Answer 1

您的问题是 PHP 中的 lat 和 lon 值是字符串。我假设（因为你的问题在这个阶段不包括它）你的 addMarker 函数没有将这些字符串转换为谷歌地图期望的 lat/lng 值的数字对象。

尝试在将它们传递给 Maps API 之前将它们简单地包装在 parseFloat() 中，例如

addMarker(parseFloat(item.lat), parseFloat(item.lon));

或者，您可以在 addMarker 函数本身中执行此操作（这可能更好）。

Answer 2

您需要将标记添加到地图中。您的代码当前的结构方式映射是初始化函数的本地方式，无法将该值传递给 addMarker 函数。

你有两个选择：

• 将“map”变量传递给 addMarker 函数

function initialize() {
    var mapOptions = {
        center: {
            lat: -25.363882,
            lng: 131.044922
        },
        zoom: 14
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    $.getJSON('parser.php', function (items) {
        for (var i = 0; i < items.length; i++) {
            (function (item) {
                addMarker(item.lat, item.lon, map);
            })(items[i]);
        }
    });
}

proof of concept fiddle

工作代码sn-p：

function initialize() {
  var mapOptions = {
    center: {
      lat: -25.363882,
      lng: 131.044922
    },
    zoom: 14
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // $.getJSON('parser.php', function (items) {
  var items = [{
    "0": "33.880561",
    "lat": "33.880561",
    "1": "35.542831",
    "lon": "35.542831"
  }, {
    "0": "-25.363882",
    "lat": "25.363882",
    "1": "131.044922",
    "lon": "131.044922"
  }];
  for (var i = 0; i < items.length; i++) {
    (function(item) {
      addMarker(item.lat, item.lon, map);
    })(items[i]);
  }
  // });
}
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, map) {
  var latlng = new google.maps.LatLng(lat, lng);
  bounds.extend(latlng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  map.fitBounds(bounds);
  return marker;
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

• 将“map”变量设为全局变量。

var map; // global variable, outside of any function definition
function initialize() {
    var mapOptions = {
        center: {
            lat: -25.363882,
            lng: 131.044922
        },
        zoom: 14
    };

    // initialize the global variable (no "var")
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    $.getJSON('parser.php', function (items) {
        for (var i = 0; i < items.length; i++) {
            (function (item) {
                addMarker(item.lat, item.lon);
            })(items[i]);
        }
    });
}

工作代码sn-p：

var map;
function initialize() {
  var mapOptions = {
    center: {
      lat: -25.363882,
      lng: 131.044922
    },
    zoom: 14
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // $.getJSON('parser.php', function (items) {
  var items = [{
    "0": "33.880561",
    "lat": "33.880561",
    "1": "35.542831",
    "lon": "35.542831"
  }, {
    "0": "-25.363882",
    "lat": "25.363882",
    "1": "131.044922",
    "lon": "131.044922"
  }];
  for (var i = 0; i < items.length; i++) {
    (function(item) {
      addMarker(item.lat, item.lon);
    })(items[i]);
  }
  // });
}
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  bounds.extend(latlng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  map.fitBounds(bounds);
  return marker;
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>