19.05.2019, 10:39
|
|
Интересующийся
|
|
Регистрация: 18.05.2019
Сообщений: 19
|
|
Сообщение от рони
|
|
да, осталось только получить формат данных от вас.
|
Только до меня всё равно не доходит, где этот обработчик должен быть прописан?
Формат данных такой как указал здесь в примере:
<html>
<head>
<title>Главная страница</title>
<style>
#map {
height: 50%;
}
html, body {
height: 100%;
}
</style>
<script>
var map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.754207,55.106578),
zoom: 8
});
}
function UpdateGoogleMap(latitude, longitude) {
latitude = (latitude && +latitude)||51.754207;
longitude = (longitude && +longitude)||55.106578;
map.setCenter({
lat: latitude,
lng: longitude
});
marker && marker.setMap(null);
marker=new google.maps.marker({
position: {
lat: latitude,
lng: longitude
},
map: map,
title: 'Это здесь'
});
};
</script>
<!-- -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWH__g2XMzhes7PIk-8v2MbBSZTgMnBSg&callback=initMap"
async defer></script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>idPost</th>
<th>namePost</th>
<th>distanceBeetwenSensors</th>
<th>geographkoords</th>
</tr>
</thead>
<tbody>
<c:forEach items="${listPosts}" var="post">
<tr>
<td>1</td>
<td>г.Самара</td>
<td>2</td>
<td>55.09 52.07</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div id="map"></div>
</body>
</html>
|
|
19.05.2019, 10:43
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Vladiiimir,
ждите...
|
|
19.05.2019, 10:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Vladiiimir,
проверьте
<script>
var map, marker;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.754207,55.106578),
zoom: 8
});
}
function UpdateGoogleMap(latitude, longitude) {
latitude = (latitude && +latitude)||51.754207;
longitude = (longitude && +longitude)||55.106578;
map.setCenter({
lat: latitude,
lng: longitude
});
marker && marker.setMap(null);
marker=new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
},
map: map,
title: 'Это здесь'
});
};
addEventListener("click", ({target}) => {
var tr = target.closest("tbody > tr");
if(!tr) return;
var position = tr.querySelector("td:last-child").textContent;
position = position.split(/\s+/).map(Number);
UpdateGoogleMap(...position)
});
</script>
Последний раз редактировалось рони, 19.05.2019 в 11:37.
|
|
19.05.2019, 11:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Vladiiimir
|
|
marker=new google.maps.marker({
|
new google.maps. Marker |
|
19.05.2019, 14:32
|
|
Интересующийся
|
|
Регистрация: 18.05.2019
Сообщений: 19
|
|
|
Сообщение от рони
|
Vladiiimir,
проверьте
|
Слушатель срабатывает, но судя по отладчику googlehrome в функцию UpdateGoogleMap передаётся пустое значение (переменная position) https://drive.google.com/open?id=1BH...9x9Fp_m_HWaLOD
Можете прокомментировать, что значит переменная target?
Что мы делаем в строках:
var position = tr.querySelector("td:last-child").textContent;
position = position.split(/\s+/).map(Number);
Последний раз редактировалось Vladiiimir, 19.05.2019 в 14:36.
|
|
19.05.2019, 14:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Vladiiimir,
вы поменяли расположение ячейки с данными!!!
сделайте ячейке класс например <td class="geo">55.09 52.07</td>
и тогда
var position = tr.querySelector("td.geo").textContent;
|
|
19.05.2019, 14:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Vladiiimir,
или так
var position = tr.querySelector("td:nth-child(4)").textContent;
|
|
19.05.2019, 15:05
|
|
Интересующийся
|
|
Регистрация: 18.05.2019
Сообщений: 19
|
|
|
Сообщение от рони
|
Vladiiimir,
вы поменяли расположение ячейки с данными!!!
сделайте ячейке класс например <td class="geo">55.09 52.07</td>
и тогда
var position = tr.querySelector("td.geo").textContent;
|
Работает! Громадная благодарность!
А можно вот как мы сделали привязку к ячейке <td class="geo">55.09 52.07</td>, аналогично сделать привязку слушателя к таблице? |
|
19.05.2019, 15:09
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от Vladiiimir
|
|
А можно вот как мы сделали привязку к ячейке <td class="geo">55.09 52.07</td>, аналогично сделать привязку слушателя к таблице?
|
не понимаю вопроса, можно подробнее? |
|
19.05.2019, 15:12
|
|
Интересующийся
|
|
Регистрация: 18.05.2019
Сообщений: 19
|
|
|
Сообщение от рони
|
|
не понимаю вопроса, можно подробнее?
|
Если у меня на странице добавится ещё одна таблица, то этот слушатель ведь будет реагировать и на щелчки по 2-ой таблицы? |
|
|
|
