在 JavaScript 循环中显示地图标记的 JSON 解析数据

show JSON parsed data in javascript loop for maps markers

本文关键字：JSON 数据 图标 循环 JavaScript 显示 地图      更新时间：2023-09-26

我正在尝试获取经度和纬度标记并在地图上显示它们，但我没有得到任何结果，我的解析器.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>

解析器.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"}]

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

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

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

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

您需要将标记添加到地图中。按照代码当前结构化的方式，映射是初始化函数的本地映射，无法将该值传递给 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]);
        }
    });
}

概念验证小提琴

工作代码片段：

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]);
        }
    });
}

工作代码片段：

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>

相关文章：