Javascript 动态调用时缺少标记

Javascript 动态调用时缺少标记,javascript,laravel,laravel-5,laravel-5.8,Javascript,Laravel,Laravel 5,Laravel 5.8,动态调用时,大多数标记都会丢失。这是我的密码。我是拉拉维尔的初学者。Sports变量包含各种运动名称、每个运动名称的标记图像、每个运动名称的弹出图像等。Mapevents包含不同纬度和经度的不同/重复的运动名称。尝试使用标记在地图中进行标记时,大多数地图事件不会显示 <script type="text/javascript"> (function(A) { if (!Array.prototype.forEach) A.forEach = A.f

动态调用时,大多数标记都会丢失。这是我的密码。我是拉拉维尔的初学者。Sports变量包含各种运动名称、每个运动名称的标记图像、每个运动名称的弹出图像等。Mapevents包含不同纬度和经度的不同/重复的运动名称。尝试使用标记在地图中进行标记时,大多数地图事件不会显示

<script type="text/javascript">
  (function(A) {
  if (!Array.prototype.forEach)
    A.forEach = A.forEach || function(action, that) {
      for (var i = 0, l = this.length; i < l; i++)
        if (i in this)
          action.call(that, this[i], i, this);
      };
    })(Array.prototype);
    var
    mapObject,
    markers = [],
    markersData = {
      @foreach($mapevents as $event)
      @foreach($sports as $sport)
      @if($event->category_id==$sport->id)
      '{{$sport->marker_image}}': [
      {
        name: 'Events',
        location_latitude: "{{$event->lat}}", 
        location_longitude: "{{$event->lng}}",
        map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
        name_point: '"{{$event->CategoryDetails->sports}}"',
        description_point: 'Event Details<br>Starting Date: "{{$event->start_date}}"<br>Ending Date: "{{$event->end_date}}"<br>Starting time: "{{$event->start_time}}"<br>Ending time: "{{$event->end_time}}"',
        url_point: 'eventsdetails'
      },
      ],
      @endif
      @endforeach
      @endforeach
      @foreach($maphotspots as $hotspot)
      @foreach($sports as $sport)
      @if($hotspot->category_id==$sport->id)
      '{{$sport->marker_image}}': [
      {
        name: 'Hotspots',
        location_latitude: "{{$hotspot->lat}}", 
        location_longitude: "{{$hotspot->lng}}",
        map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
        name_point: '"{{$hotspot->CategoryDetails->sports}}"',
        description_point: 'Hotspot Details<br>Starting Date: "{{$hotspot->start_date}}"<br>Ending Date: "{{$hotspot->end_date}}"<br>Starting time: "{{$hotspot->start_time}}"<br>Ending time: "{{$hotspot->end_time}}"',
        url_point: 'hotspotsdetails'
      },
      ],
      @endif
      @endforeach
      @endforeach
    };
    function initialize () {
      var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng("{{$latitude}}", "{{$longitude}}"),
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: false,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl: false,
        panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: false,
        scaleControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
        },
        styles: [{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"off"}]},{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}]
      };
      var
      marker;
      mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
      for (var key in markersData)
        markersData[key].forEach(function (item) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
            map: mapObject,
            icon: 'sport2gether/storage/' + key, 
          });
          if ('undefined' === typeof markers[key])
            markers[key] = [];
          markers[key].push(marker);
          google.maps.event.addListener(marker, 'click', (function () {
      closeInfoBox();
      getInfoBox(item).open(mapObject, this);
      mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
     }));    
        });
    };
    function hideAllMarkers () {
      for (var key in markers)
        markers[key].forEach(function (marker) {
          marker.setMap(null);
        });
    };
    function toggleMarkers (category) {
      hideAllMarkers();
      closeInfoBox();
      if ('undefined' === typeof markers[category])
        return false;
      markers[category].forEach(function (marker) {
        marker.setMap(mapObject);
        marker.setAnimation(google.maps.Animation.DROP);

      });
    };
    function closeInfoBox() {
      $('div.infoBox').remove();
    };
    function getInfoBox(item) {
      return new InfoBox({
        content:
        '<div class="marker_info none" id="marker_info">' +
        '<div class="info" id="info">'+
        '<img src="' + item.map_image_url + '" class="logotype" alt=""/>' +
        '<h2>'+ item.name_point +'<span></span></h2>' +
        '<span>'+ item.description_point +'</span>' +
        '<a href="'+ item.url_point + '" class="green_btn">Join</a>' +
        '<span class="arrow"></span>' +
        '</div>' +
        '</div>',
        disableAutoPan: true,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(40, -210),
        closeBoxMargin: '50px 200px',
        closeBoxURL: '',
        isHidden: false,
        pane: 'floatPane',
        enableEventPropagation: true
      });
    };
</script>

(职能(A){
if(!Array.prototype.forEach)
A.forEach=A.forEach | |函数(动作,即){
for(var i=0,l=this.length;icategory\u id==$sport->id)
“{{$sport->marker_image}}”[
{
名称:'事件',
位置纬度:“{{$event->lat}}”,
地点:“{{$event->lng}}”,
映射图像url:“sport2gether/storage/”,
名称点:“{{$event->categorydeails->sports}}”,
description_point:'Event Details
开始日期:“{{$Event->start_Date}}”
结束日期:{{{$Event->end_Date}”
开始时间:{{$Event->start_time}}”
结束时间:{{$Event->end_time}, url_点:“事件详细信息” }, ], @恩迪夫 @endforeach @endforeach @foreach($maphotspots作为$hotspot) @foreach($sports as$sport) @如果($hotspot->category_id==$sport->id) “{{$sport->marker_image}}”[ { 名称:'热点', 位置纬度:“{{$hotspot->lat}}”, 位置经度:“{{$hotspot->lng}}”, 映射图像url:“sport2gether/storage/”, 名称点:“{{$hotspot->CategoryDetails->sports}}”, 描述:{br>热点详细信息
开始日期:{{{$Hotspot->start{u Date}}{br>结束日期:{{$Hotspot->end{u Date}}{br>开始时间:{{$Hotspot->start{u time}}}{br>结束时间:{{$Hotspot->end{u time}}, url_点:“热点详细信息” }, ], @恩迪夫 @endforeach @endforeach }; 函数初始化(){ 变量映射选项={ 缩放:16, 中心:新的google.maps.LatLng(“{{$latitude}}”,“{{$longitude}”), mapTypeId:google.maps.mapTypeId.HYBRID, mapTypeControl:false, mapTypeControlOptions:{ 样式:google.maps.MapTypeControlStyle.DROPDOWN_菜单, 位置:google.maps.ControlPosition.LEFT_CENTER }, 泛控制:错误, 全控选项:{ 位置:google.maps.ControlPosition.TOP\u右 }, 动物控制:对, ZoomControl选项:{ 样式:google.maps.ZoomControlStyle.LARGE, 位置:google.maps.ControlPosition.TOP\u右 }, scaleControl:false, 规模控制:{ 位置:google.maps.ControlPosition.TOP_左 }, 街景控制:错误, 街景控制选项:{ 位置:google.maps.ControlPosition.LEFT_TOP }, 样式:[{“featureType”:“poi”,“stylers”:[{“visibility”:“off”}},{“stylers”:[{“saturation”:-70},{“lightness”:37},{“gamma”:1.15},{“elementType”:“labels”,“stylers”:[{“gamma”:0.26},{“visibility”:“off”},{“featureType”:“road”,“stylers”:[{“lightness”:0},{“lightness”:0},{“saturation”:0},{“hue”:},{“hue”:},{“labels.text.stroke”,“stylers:[{“可见性”:“on”},{“featureType”:“road.arteral”,“elementType”:“geometry”,“stylers”:[{“lightness”:20},{“featureType”:“road.highway”,“elementType”:“geometry”,“stylers”:[{“lightness”:50},{“saturation”:0},{“hue”:“featureType”:“administrative.province”,“stylers”:“{“可见性”:“on”},{“lightness”:“lightness”:-50}]},{“featureType”:“administrative.province”,“elementType”:“labels.text.stroke”,“stylers”:[{“visibility”:“off”}]},{“featureType”:“administrative.province”,“elementType”:“labels.text”,“stylers”:[{“lightness”:20}]}] }; 变量 标记; mapObject=new google.maps.Map(document.getElementById('Map'),mapOptions); for(markersData中的变量键) markersData[key].forEach(函数(项){ marker=新的google.maps.marker({ 位置:新的google.maps.LatLng(item.location\u纬度,item.location\u经度), map:mapObject, 图标:“sport2gether/storage/”+键, }); if('undefined'==标记类型[键]) 标记[键]=[]; 标记器[键]。按(标记器); google.maps.event.addListener(标记,'click',(函数(){ closeInfoBox(); getInfoBox(item).open(mapObject,this); setCenter(新的google.maps.LatLng(item.location_纬度,item.location_经度)); })); }); }; 函数隐藏标记器(){ for(变量键入标记) markers[key].forEach(函数(marker){ marker.setMap(空); }); }; 功能切换标记(类别){ 隐藏标记(); closeInfoBox(); if('undefined'==标记类型[类别]) 返回false; 标记[类别].forEach(函数(标记){ marker.setMap(mapObject); setAnimation(google.maps.Animation.DROP); }); }; 函数closeInfoBox(){ $('div.infoBox').remove(); }; 函数getInfoBox(项){ 返回新信息框({ 内容: '' + ''+ '' + ''+item.name_point+''项目名称+ ''+项目描述\u点+''+ '' + '' + '' + '', 是的, 最大宽度:0, pixelOffset:new google.maps.Size(40,-210), closeBoxMargin:'50px 200px', closeBoxURL:“”, 伊希登:错, 窗格:“浮动窗格”, enableEventPropagation:true }); };