Ubicar marcadores en mapa solo me muestra uno solo
Publicado por Eduardo (175 intervenciones) el 07/07/2023 01:04:56
Hola a todos espero esten todos muy bien...
tengo el siguiente codigo el cual me muestra en un mapa los puntos asignados, aunque es un codigo estatico he intentado realizarlo que lo tome de una base de datos pero no me resulta
aca pongo el codigo estatico
Asi Funciona perfecto....
esta es la parte del codigo el cual toma los puntos ubicación en latitudes y longitud y la ubica en el mapa con el titulo correspondinete
y asi es el codigo que he estado haciendo
Funciona Peroooo solo me muestra un solo marcador almacenado en la base de datos y no todos como debería ser...
me podrian ayudar por fa.... Mil gracias!!!
tengo el siguiente codigo el cual me muestra en un mapa los puntos asignados, aunque es un codigo estatico he intentado realizarlo que lo tome de una base de datos pero no me resulta
aca pongo el codigo estatico
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Street Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<div id="mi_mapa" style="width: 100%; height: 600px;"></div>
<script>
let map = L.map('mi_mapa').setView([9.3184266,-75.2945045,15.5], 15)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([9.31626085642734,-75.29231668522354]).addTo(map).bindPopup("ggggggg")
L.marker([9.316271619180206,-75.2930670326153]).addTo(map).bindPopup("Caneca 2")
map.on('click', onMapClick)
function onMapClick(e) {
alert("Posición: " + e.latlng)
}</script>
</body>
</html>
Asi Funciona perfecto....
esta es la parte del codigo el cual toma los puntos ubicación en latitudes y longitud y la ubica en el mapa con el titulo correspondinete
1
2
L.marker([9.31626085642734,-75.29231668522354]).addTo(map).bindPopup("ggggggg")
L.marker([9.316271619180206,-75.2930670326153]).addTo(map).bindPopup("Caneca 2")
y asi es el codigo que he estado haciendo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="es">
<?php
$mysqli = new mysqli('localhost', 'usuario', 'contrasena', 'basededatos');
?>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Street Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<div id="mi_mapa" style="width: 100%; height: 600px;"></div>
<script>
let map = L.map('mi_mapa').setView([9.3184266,-75.2945045,15.5], 15)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<?php
$query = $mysqli -> query ("SELECT * FROM mapa_canecas WHERE municipio_caneca='COROZAL'");
while ($valores = mysqli_fetch_array($query))
{echo 'L.marker(['.$valores[ubicacion_caneca].']).addTo(map).bindPopup("'.$valores[titulo_caneca].'")';
echo '<br>'; }?>
//L.marker([9.31626085642734,-75.29231668522354]).addTo(map).bindPopup("ggggggg") //L.marker([9.316271619180206,-75.2930670326153]).addTo(map).bindPopup("Caneca 2")map.on('click', onMapClick)
function onMapClick(e) {
alert("Posición: " + e.latlng)
}</script>
</body>
</html>
Funciona Peroooo solo me muestra un solo marcador almacenado en la base de datos y no todos como debería ser...
me podrian ayudar por fa.... Mil gracias!!!
Valora esta pregunta
0
