谷歌地图php中没有正确显示多个标记答案

【问题标题】：Multiple markers are not properly showing in google map php谷歌地图php中没有正确显示多个标记
【发布时间】：2020-05-04 11:53:51
【问题描述】：

在我的 laravel 项目中，我试图在谷歌地图中显示我的诊所的位置（从 php 数据库中获取纬度和经度值）。以下是我在控制器中的代码。

public function showClinicLocations($id)
{
    $clinic = Clinic::find($id);
    $locations = Location::where('clinicID', $id)->get();
    return view('clinic.locations')->with(['locations' =>  $locations  ,'clinic'=>$clinic]);
}

在视图页面中正确获取 locations 。当我安慰 locations.length 时，我得到的结果为 12 ，它是正确的，并且正在获取完整的位置名称。

但是当我试图在标记中显示它时，谷歌地图标记中只显示了 11 个位置。以下是谷歌地图标记中的代码。

<script>

// var services =<?php echo json_encode($services);?>;
// console.log(services);

function initMap() {
    var locations = <?php echo $locations ?>;
    console.log(locations.length);

    var j;
    for (j = 0; j < locations.length; j++) { 
        var map = new google.maps.Map(document.getElementById('map'), 
                                        {zoom: 8,
                                        center: {
                                            lat: parseFloat(locations[j]['locationLat']), 
                                            lng:parseFloat(locations[j]['locationLong'])
                                            }
                                        }
                                        );
        setMarkers(map);
    }
}

function setMarkers(map) {
    var locations = <?php echo $locations ?>;
    //var services = <?php echo $services ?>;

    //console.log(services);

    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
                map: map,
                position: {lat: parseFloat(locations[i]['locationLat']), lng:parseFloat(locations[i]['locationLong'])},
                map: map,
                title: locations[i]['locationName']
                });
        var infowindow = new google.maps.InfoWindow()
        var content = locations[i]['locationName']; 

        google.maps.event.addListener(marker,'click', 
                        (function(marker,content,infowindow){ 
                            return function() {
                                infowindow.setContent(content);
                                infowindow.open(map,marker);
                            };
                        })(marker, content,infowindow));  

    }
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

谷歌地图显示标记的代码有什么问题

【问题讨论】：

良好的代码缩进将帮助我们阅读代码，更重要的是，它将帮助您调试代码Take a quick look at a coding standard 为您自己的利益。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
尝试在第一个 for 上将 j < locations.length 更改为 j =< locations.length
为什么要循环创建新地图？如果您说预期有 12 个结果，这意味着将创建 12 个地图（可能不是真的，因为它们都使用相同的容器）

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

【解决方案1】：

您只想生成一次地图，并且可能还希望地图适合所有显示标记的边界：

var locations = JSON.parse("<?php echo $locations ?>");

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: {
      lat: parseFloat(locations[0]["locationLat"]),
      lng: parseFloat(locations[0]["locationLong"])
    }
  });

  setMarkers(map);
}

function setMarkers(_map) {
  var boundsToFit = new google.maps.LatLngBounds();

  for (var i = 0; i <= locations.length; i++) {
    var marker = new google.maps.Marker({
      map: _map,
      position: {
        lat: parseFloat(locations[i]["locationLat"]),
        lng: parseFloat(locations[i]["locationLong"])
      },
      map: _map,
      title: locations[i]["locationName"]
    });
    var infowindow = new google.maps.InfoWindow();
    var content = locations[i]["locationName"];

    google.maps.event.addListener(
      marker,
      "click",
      (function (marker, content, infowindow) {
        return function () {
          infowindow.setContent(content);
          infowindow.open(_map, marker);
        };
      })(marker, content, infowindow)
    );

    boundsToFit.extend(marker.getPosition());
  }

  _map.fitBounds(boundsToFit);
}

【讨论】：