使用javascript在谷歌地图中放置多个标记答案

【问题标题】：Placing multiple markers in google maps using javascript使用javascript在谷歌地图中放置多个标记
【发布时间】：2018-09-28 12:51:48
【问题描述】：

我想使用 ajax、javascript 和 php 在 Google 地图中添加多个标记。没有错误，但标记没有显示为什么？请帮忙。请参阅下面的 AJAX DATA 示例输出：

数组(3409)
[0 … 99]
0 ： {GPS_COORDINATES：“14.901177,120.867704”}
1 ： {GPS_COORDINATES：“14.620365,120.577517”}
2 ： {GPS_COORDINATES：“14.869043,120.463918”}
3 ： {GPS_COORDINATES：“14.436324,120.487099”}
4 ： {GPS_COORDINATES：“14.676802,120.535833”}
5 ： {GPS_COORDINATES：“14.564611,120.595372”}
6 ： {GPS_COORDINATES：“14.720815,120.535681”}
7 ： {GPS_COORDINATES：“14.867589,120.463541”}
8 ： {GPS_COORDINATES：“14.680134,120.539518”}
9 ： {GPS_COORDINATES：“14.867287,120.464906”}
10 ： {GPS_COORDINATES: "14.840842,120.475522"}

SCREENSHOT OF AJAX DATA

这是我的 AJAX 代码：

function initMap() {

  var map;

  $.ajax({
    url: "retailer-marker.php",
    method: "POST",
    data: {
      search: search,
      coordinator: coordinator
    },
    dataType: "json",
    success: function(data) {

      var bounds = new google.maps.LatLngBounds();

      var center = new google.maps.LatLng(12.5, 122);
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5.2,
        center: center
      });
      for (i = 0; i < data.length; i++) {
        var position = new google.maps.LatLng(data[i][0]);
        marker = new google.maps.Marker({
          position: position,
          map: map,
          title: data[i][0]
        });
      }

    },
    error: function(data) {
      console.log("error");
    }
  });
}

PHP 代码：

    $sql = "SELECT GPS_COORDINATES FROM ret_retailer";

$result = mysqli_query($conn, $sql);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
} 

print json_encode($data);

【问题讨论】：

标签： javascript php ajax google-maps google-maps-api-3

【解决方案1】：

您的 data 数组包含对象。所以data[i][0] 将不起作用。你需要data[i].GPS_COORDINATES。

~~所以，以下应该可以工作：~~

var position = new google.maps.LatLng(data[i].GPS_COORDINATES);

如果你只是简单地做了一个console.log(data[i])，那就很明显了。

编辑：

您创建LatLng 对象的方式会导致问题。 LatLng 方法需要 2 个参数（lat 和 lng），而您只传递一个（作为包含 lat 和 lng 的字符串）。这对我有用：

for (var i = 0; i < data.length; i++) {

  var coords = data[i].GPS_COORDINATES.split(','); // Split your string on the coma to get lat and lng as separate values
  var position = new google.maps.LatLng(coords[0], coords[1]); // Use them here as LatLng method expects 2 arguments

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

另外，请确保正确声明变量（使用 var 关键字），例如：var i = 0; 和 var marker = ... 等等。

【讨论】：

@MaricrisPacheco 如果它解决了您的问题，请将其标记为问题的正确答案
它不是仍然没有显示标记@MarcelDjaman

【解决方案2】：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
 <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">

var locations = [
  ['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]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
</script>
</body>
</html>

【讨论】：

我知道该教程如何将我的 AJAX 数据 转换为 var locations = [ ['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,15128747820854187,2]，['Maroubra Beach'，-33.950198,151.259302 , 1] ];
虽然这可能有效，但请解释为什么它会解决 OP 的问题。只是从文档中复制粘贴代码 sn-p 对任何人都没有帮助。