Привет, пожалуйста, мне нужна помощь по добавлению динамических c маркеров на OpenStreetMap с Leaflet. Это мой код: html и приложение. Js связаны, я использовал библиотеку фейеров, как вы видите, список пространство имен в верхней части файла, которое я пробовал Ajax в сочетании с Php через Json или замените точку stati c на фейкер на php l oop, но все еще не работает, вы можете помочь пожалуйста?
<?php
require('vendor/autoload.php');
$faker = Faker\Factory::create();
?>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="padding-left: 30px;">the best restaurants <strong></strong></h1>
<div class="container">
<div class="list">
<?php for ($i = 0; $i < 10; $i++): ?>
<div class="item js-marker" data-lat="<?= $faker->latitude(0.4189048, 0.4200158) ?>" data-lng="<?= $faker->longitude(9.4277649, 9.4388750) ?>" data-price="<?= $faker->numberBetween(0, 50) ?>">
<img src="https://via.placeholder.com/400x260" alt="">
<h4>here the title !</h4>
<p>
here the description
</p>
</div>
<?php endfor; ?>
</div>
<div class="map" id="map"></div>
</div>
<script src="vendor.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
let $map = document.querySelector('#map')
class LeafletMap {
constructor () {
this.map = null
this.bounds = []
}
async load (element) {
return new Promise((resolve, reject) => {
$script(['https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'], () => {
this.map = L.map(element, {scrollWheelZoom: false})
L.tileLayer(/*'//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { */'//api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
accessToken: 'pk.eyJ1Ijoid2FsdHkiLCJhIjoiY2s2MjE4ZXl4MDc0ZTNsdDZ5MGxyYWVzaCJ9.B_Har_CTG_PjfR0Hx0MgXg',
id: 'mapbox.streets'
}).addTo(this.map)
resolve()
})
})
}
addMarker (lat, lng, text) {
let point = [lat, lng]
this.bounds.push(point)
return new LeafletMarker(point, text, this.map)
}
center () {
this.map.fitBounds(this.bounds)
}
}
class LeafletMarker {
constructor (point, text, map) {
this.text = text
this.popup = L.popup({
autoClose: false,
closeOnEscapeKey: false,
closeOnClick: false,
closeButton: true,
className: 'marker',
maxWidth: 400
})
.setLatLng(point)
.setContent(text)
.openOn(map)
}
setActive () {
this.popup.getElement().classList.add('is-active')
}
unsetActive () {
this.popup.getElement().classList.remove('is-active')
}
addEventListener (event, cb) {
this.popup.addEventListener('add', () => {
this.popup.getElement().addEventListener(event, cb)
})
}
setContent (text) {
this.popup.setContent(text)
this.popup.getElement().classList.add('is-expanded')
this.popup.update()
}
resetContent () {
this.popup.setContent(this.text)
this.popup.getElement().classList.remove('is-expanded')
this.popup.update()
}
}
const initMap = async function () {
let map = new LeafletMap()
let hoverMarker = null
let activeMarker = null
await map.load($map)
Array.from(document.querySelectorAll('.js-marker')).forEach((item) => {
let marker = map.addMarker(item.dataset.lat, item.dataset.lng, item.dataset.price)
item.addEventListener('mouseover', function () {
if (hoverMarker !== null) {
hoverMarker.unsetActive()
}
marker.setActive()
hoverMarker = marker
})
item.addEventListener('mouseleave', function () {
if (hoverMarker !== null) {
hoverMarker.unsetActive()
}
})
marker.addEventListener('click', function () {
if (activeMarker !== null) {
activeMarker.resetContent()
}
marker.setContent(item.innerHTML)
activeMarker = marker
})
})
map.center()
}
if ($map !== null) {
initMap()
}