Я использовал пример кода, найденного здесь: https://mediarealm.com.au/articles/openstreetmap-openlayers-map-markers/
Он говорит, что я должен быть в состоянии вызвать add_map_point в любой точке моего тела, но когда я делаю это, я получаю ошибку:
Uncaught TypeError: Невозможно прочитать свойство addLayer из undefined в add_map_point
Я думаю, это потому, что я каким-то образом вызываю его до полной инициализации карты, но я понятия не имею, для чего решениеэто.
Я пытался переместить теги <script> и JavaScript в тело, однако это приводит к тому, что карта вообще не загружается.Если я вызываю функцию, например,
<body onload="initialize_map(); add_map_point(-33.8688, 151.2093);">
, она добавит маркер, как я и ожидал, но вызов функции из любого другого места (с использованием тегов <script> или из php, как мне нужно) даетмне эта ошибка.
Вот мой код:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Interface-PageStyle.css" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<script>
/* OSM & OL example code provided by https://mediarealm.com.au/ */
var map;
var mapLat = 52.626603;
var mapLng = -1.330148;
var mapDefaultZoom = 10;
function initialize_map() {
map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([mapLng, mapLat]),
zoom: mapDefaultZoom
})
});
}
function add_map_point(lat, lng) {
var vectorLayer = new ol.layer.Vector({
source:new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
})]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "iconfinder_map-marker_299087.svg"
//Marker icon located at: https://www.iconfinder.com/icons/299087/map_marker_icon, with license: https://creativecommons.org/licenses/by/3.0/, no changes made.
})
})
});
map.addLayer(vectorLayer); //This line is the problem
}
</script>
</head>
<body onload="initialize_map();">
<div id="map" class="mapdiv"></div>
<?php include 'accdatab.php';
$volID = $_SESSION['id'];
$sql = "SELECT Latitude, Longitude FROM jobs";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()){
$lat = $row['Latitude'];
$lon = $row['Longitude'];
//echo "<script> add_map_point(0, 0); </script>";
}
}
?>
<script> add_map_point(0, 0); </script>
</body>
</html>