GoogleMaps Javascript+Laravel 中的多个标记

Question

我正在尝试构建一个简单的“商店定位器”，在其中传递搜索键并返回地图上的附近地址。为此，我使用 Javascript 和 Laravel Eloquent。我可以看到地图，但看不到标记。请建议我该怎么做？

 <script>
  var locations =  <?php echo $address_markes ?>  ;
  var lat = 22.54430389404;
  var lng = 88.36476135254;
  var map = new google.maps.Map(document.getElementById('map-canvas'),{
    center:{
      lat: lat,
      lng: lng
    },
    zoom: 15
  });

  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));
    }
  /*var marker =  new google.maps.Marker({
    position:{
      lat:lat,
      lng: lng
    },
    map:map
  });*/

  </script>

当我点击查看源代码时，我看到了这个：

<script>   
    var locations =  [{
        "dealership_name":"Shyam Motors",
        "lat":22.544303894,
        "lng":88.3647613525
    },
    {
        "dealership_name":"Das Auto",
        "lat":22.5396156311,
        "lng":88.3710708618
    }]  ;   
    var lat = 22.54430389404;   
    var lng = 88.36476135254;   
    var map = new google.maps.Map(document.getElementById('map-canvas'),{
        center:{
          lat: lat,
          lng: lng
        },
        zoom: 15   
    });

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));
}   /*var marker =  new google.maps.Marker({
position:{
  lat:lat,
  lng: lng
},
map:map   });*/
 </script>

那么我哪里错了？请指导。

Answer 1

你做错了什么；您尝试通过索引从对象中获取项目。当您在 for 循环中尝试 console.log(locations[i]) 时，您会看到如下内容：

{
    dealership_name: "Shyam Motors",
    lat: "22.544303894",
    lng: "88.3647613525",
}

毕竟这是基本的javascript，如果不知道你应该学习它。

这就是你的 for 循环的样子：

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

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i].dealership_name);
            infowindow.open(map, marker);
        }
    })(marker, i));
}