陷入gmap intregration
这里我将gmap集成到我的laravel项目中，并希望在gmap上显示包含一些信息的位置，但是map没有按预期工作。显示地图时出现问题，地图也不显示。在这里我附加图像究竟它看起来如何。 
我也会显示代码并关联js
JS
$(document).ready(function() {
'use strict';
/**
* Checkbox & radio inputs
*/
$('input[type=checkbox], input[type=radio]').ezMark();
/**
* Map Leaflet Contact
*/
if ($('#map-contact').length) {
var map = L.map('map-contact', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
map.scrollWheelZoom.disable();
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
}).addTo(map);
var icon = L.divIcon({
html: '<i class="fa fa-suitcase"></i>',
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker([40.761077, -73.88], {
icon: icon
}).addTo(map);
}
/**
* Map Leaflet
*/
if ($('#map-leaflet').length) {
var map = L.map('map-leaflet', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
var marker_cluster = L.markerClusterGroup();
map.scrollWheelZoom.disable();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
}).addTo(map);
$.ajax('assets/data/markers.json', {
success: function(markers) {
$.each(markers, function(index, value) {
var icon = L.divIcon({
html: value.icon,
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker(value.center, {
icon: icon
}).addTo(map);
marker.bindPopup(
'<div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div>'
);
marker_cluster.addLayer(marker);
});
map.addLayer(marker_cluster);
}
});
}
/**
* Google Map
*/
if ($('#map-google').length) {
$.ajax('assets/data/markers.json', {
"dataType" : "json",
success: function(values) {
var markers = [];
var infos = [];
$.each(values, function(index, value) {
var content = '<div id="' + value.id + '" class="map-popup-content-wrapper"><div class="map-popup-content"><div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div></div><i class="fa fa-close close"></i></div>' +
'<div class="map-marker">' + value.icon + '</div>';
markers.push({
latLng: value.center,
data: value.id,
options: {
content: content,
offset: {
x: -18,
y: -42
}
}
});
});
$('#map-google').gmap3({
map: {
options:{
styles: [{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]}],
center:[40.761077, -73.88],
scrollwheel: false,
zoom: 12
}
},
marker: {
cluster: {
radius: 100,
}
},
overlay: {
values: markers,
events: {
click: function(marker, event, context) {
$('.map-popup-content-wrapper').css('display', 'none');
if ($(event[0].target).hasClass('close')) {
$('#' + context.data).css('display', 'none');
} else {
$('#' + context.data).css('display', 'block');
}
}
}
}
});
}
});
}
/**
* Properties Carousel
*/
$('.listing-carousel').owlCarousel({
items: 4,
margin: 30,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
responsive: {
0: {
items: 1
},
540: {
items: 2
},
766: {
items: 2
},
990: {
items: 3
},
1200: {
items: 4
}
}
});
/**
* Cover carousel
*/
$('.cover-carousel').owlCarousel({
items: 1,
nav: true,
navText: ['<img src="assets/img/lnr-chevron-left.svg" alt="">', '<img src="assets/img/lnr-chevron-right.svg" alt="">']
});
/**
* Image gallery
*/
$('.gallery').owlCarousel({
autoplay: 3000,
items: 1,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>']
});
/**
* Customizer
*/
$('.customizer-title').on('click', function() {
$('.customizer').toggleClass('open');
});
$('.customizer a').click('click', function(e) {
e.preventDefault();
var cssFile = $(this).attr('href');
$('#css-primary').attr('href', cssFile);
});
/**
* Charts
*/
if ($('.ct-chart-1').length) {
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 15
};
var responsiveOptions = [
['screen and (min-width: 641px) and (max-width: 1024px)', {
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: function (value) {
return value;
}
}
}],
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart-1', data, options, responsiveOptions);
}
/**
* Charts
*/
if ($('.ct-chart-2').length) {
new Chartist.Line('.ct-chart-2', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
}, {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: false,
showGrid: false
}
});
}
/**
* Charts
*/
if ($('.ct-chart-3').length) {
new Chartist.Bar('.ct-chart-3', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
});
}
/**
* Charts
*/
if ($('.ct-chart-4').length) {
var times = function(n) {
return Array.apply(null, new Array(n));
};
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
data.labels.push(index + 1);
data.series.forEach(function(series) {
series.push(Math.random() * 100)
});
return data;
}, {
labels: [],
series: times(4).map(function() { return new Array() })
});
var options = {
showLine: false,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 13 === 0 ? 'W' + value : null;
}
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 4 === 0 ? 'W' + value : null;
}
}
}]
];
new Chartist.Line('.ct-chart-4', data, options, responsiveOptions);
}
});
这是一个视图文件 properties.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="https:://fonts.googleapis.com/css?family=Raleway::300,400,500,600,300,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/fonts/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/chartist/chartist.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.default.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/villareal-blue.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link href="{{ URL::asset('assets/css/overwrite-home.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link rel="shortcut icon" type="image/x-icon" href="{{ URL::asset('assets/favicon.png') }}">
<title>Houzeo - Properties Map</title>
</head>
<body class="">
<div class="page-wrapper">
<div class="header-wrapper">
<div class="header header-small">
<div class="header-inner">
<div class="container-fluid">
<div class="header-top">
<div class="header-top-inner">
<span class="header-logo-text"><a class="header-logo" href="index.html"> <img src="{{ URL::asset('assets/hou-imgs/houzeologo.png')}}" alt="HOUZEO LOGO"> </a></span>
<!-- /.header-logo -->
<a class="header-action" href="properties-submit.html">
<i class="fa fa-upload"></i> <span>Upload Property</span>
</a><!-- /.header-action -->
</button> -->
</div><!-- /.header-top-inner -->
</div><!-- /.header-top -->
</div><!-- /.container-fluid -->
</div><!-- /.header-inner -->
</div><!-- /.header -->
</div><!-- /.header-wrapper-->
<div class="main-wrapper">
<div class="main">
<div class="main-inner">
<div class="content">
<div class="container-fluid fullwidth-wrapper map-and-property-holder">
<div class="row">
<div class="col-lg-4 col-md-6 mapProperty-holder">
@foreach($list as $item)
<div class="row">
<div class="col-sm-12">
<div class="listingbox">
<div class="listing-box-image" style="background-image:url('assets/img/tmp/tmp-5.jpg')">
<span class="listing-box-image-links listing-box-over">
<a href="#"><i class="fa fa-eye"></i> <span>View Property Dashboard</span></a>
<a href="#"><i class="fa fa-list"></i> <span>View Listing</span></a>
</span>
</div><!-- /.listing-box-image -->
<div class="listing-box-title">
<h2><a href="properties-detail-standard.html">Bright Island Route</a></h2>
<h3>$ 40.000</h3>
</div><!-- /.listing-box-title -->
<div class="listing-box-content">
<dl>
<dt>Type</dt><dd>House</dd>
<dt>Location</dt><dd>New York</dd>
<dt>Area</dt><dd>180 sqft</dd>
</dl>
</div><!-- /.listing-box-cotntent -->
</div><!-- /.listing-box -->
</div><!-- /.col-* -->
</div>
@endforeach
</div><!-- /.col-* -->
<div class="col-lg-8 col-md-6 map-holder">
<div id="map-leaflet" class="full"></div>
<!--Please insert your map here.-->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.content -->
</div><!-- /.main-inner -->
</div><!-- /.main -->
</div><!-- /.main-wrapper -->
</div><!-- /.page-wrapper -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASlnVdH_6j-XibxbQoeV82oZQImV1a_Vs"
type="text/javascript"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.ezmark.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/gmap3.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.markercluster.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/chartist/chartist.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/scrollPosStyler.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/villareal.js')}}"></script>
</body>
</html>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？