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