Question

我希望有各种按钮在谷歌地图标记上打开相应的信息窗口。我查看了THIS之类的答案，但他们没有动态创建的内容。我从我的数据库中获取多个位置并在页面上显示它们。他们有我已添加到按钮的ID。我还在标记中添加了相应的id（如HERE所示）。

现在我只需要用正确的id触发正确的标记。我认为我的问题与范围有关，但我有点迷失。使用Laravel 5.

代码全部位于名为index.blade.php的页面上。用户输入地址，地址编码为lat / lng，然后使用文章控制器在index.blade.php上显示最近的文章/商店。

代码：

@extends('template')
@section('content')
@foreach ($articles as $article)
  <i class="fa fa-plus-square showMoreDetails" onclick="myClick({{$article->id}});"></i>
@endforeach 

@stop
@section('footer')
<script>
    var barTitle = [
        @foreach($articles as $article)
        "{{$article->title}}" ,
        @endforeach
        ];

    var barDeal = [
        @foreach($articles as $article)
        "{{$article->deal}}" ,
        @endforeach
        ];

var infoWindowContent = [];
        var markers = [];
        var i, marker;

function initialize() {

    var map_canvas = document.getElementById('map_canvas');

    var myLatlng = new google.maps.LatLng(parseFloat({{ $article->lat }}),parseFloat({{ $article->lng }}));

    var map_options = {
        center: myLatlng,
        zoom: 15,
        zoomControl: true,
        zoomControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_RIGHT
        },
        scaleControl: true,
        panControl: true,   
        panControlOptions:{
        position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        mapTypeControl: false,   
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options);

    var locations = [
    @foreach($articles as $article)
    [{{$article->lat}}, {{$article->lng}}],
    @endforeach
    ];

    var barID = [
    @foreach($articles as $article)
    {{$article->id}},
    @endforeach
    ];

for (i = 0; i < locations.length; i++) {
    infoWindowContent[i] = getInfoWindowDetails(locations[i]);
    var location = new google.maps.LatLng(locations[i][0], locations[i][1]);

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: barID[i],
        icon: 'images/happymarker.png'
    });
  var infowindow = new google.maps.InfoWindow()

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          // infowindow.setContent(barTitle[i]);
          infowindow.setContent(infoWindowContent[i]);
          infowindow.open(map, marker);
          map.panTo(marker.getPosition());
          map.setZoom(17);
        }
      })(marker, i));
    markers.push(marker);
  }
}

function getInfoWindowDetails(location){
        var contentString = '<div id="infoWindowBox">' +
                            '<h3 id="firstHeading" class="infoWindowTitle">' + barTitle[i] + '</h3>'+
                            '<div id="bodyContent">'+
                                '<div>'+ barDeal[i] + '</div>'+
                            '</div>'+
                        '</div>';
        return contentString;
    }
   google.maps.event.addDomListener(window, "load", initialize);
              function myClick(id){
            google.maps.event.trigger(markers[id], 'click');
        }  

</script>
@stop

我的template.blade.php页面加载了这样的地图：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>

文章控制者：

public function index(Request $request)
{
    $lat = $request->get('lat');
    $lng = $request->get('lng');
    $distance = 1;
    $categoryChoice = $request->get('categoryList');

    $query = Article::distance($lat, $lng, $distance)
        ->whereHas('categories', function ($query) use ($categoryChoice) {    
            $query->whereIn('categories.id', $categoryChoice);    
        })->get();

     $articles = $query;   

    if(count($articles) == 0) 
    {
        return redirect()->action('HomeController@index');
    }

    return view('articles.index', compact('categories', 'articles', 'days'));

}

Answer 1

I worked it out. I had to use Laravel's 'search' function to find the index of the array of IDs of the articles. Then that integer matched the id of the markers.

@foreach ($articles as $article)
<!-- CREATE AN ARRAY OF IDS THEN GET THE INDEX/KEY OF THIS PARTICULAR ARTICLE ID -->
      <?php $something = $articles->lists('id') 
            $artID = $article->id;  
            $key= $something->search($artID); ?>
  <i class="fa fa-plus-square showMoreDetails" onclick="myClick(<?php echo $key; ?>);"></i>
@endforeach

如何将谷歌地图标记ID与按钮上的动态创建的ID相匹配

1 个答案: