0

Добрый день, подскажите как правильно реализовать то, что на картинках. При наведении на блок, на карте меняется местоположение метки. У меня есть таблица city и там есть колонки: долгота и широта, относящиеся к каждому городу. введите сюда описание изображения

Переход (наведение) на другой блок:

введите сюда описание изображения

3
  • Добавьте код, где Вы пытаетесь это реализовать, что не получается?
    – Sv__t
    31 мая 2017 в 15:27
  • у меня нету кода, я не знаю как это реализовать
    – Uman
    31 мая 2017 в 15:45
  • Google maps api вам в помощь. В документации найдете необходимые методы как инициализировать карту и проставить маркеиы. 31 мая 2017 в 16:29

2 ответа 2

2

Делайте JS событие наведения на блок. Там можете через ajax получить данные с бд широты и долготы. Потом можно задать новое местоположение маркера:

function changeMarkerPosition(marker) {
    var latlng = new google.maps.LatLng(60, 130);
    marker.setPosition(latlng);
}

Вот посмотрите в документации всё есть. https://developers.google.com/maps/documentation/javascript/reference#Marker

1
  • а вы можете показать пример, как это все обернуть в html, я просто не совсем понимаю как мне это реализовать. Заранее спасибо
    – Uman
    31 мая 2017 в 17:16
1

Если данных много то ловите событие через document.getElementsByClassName и там смотрите какой вызывается сейчас DIV по его id. Данные можете сформировать заранее и передать массивом, либо в JS получайте их через ajax.

<?php
//Данные из БД
$locations = [
[62.03, 129.74],
[62.04, 129.75],
[62.05, 129.76]
];
?>
<div id="map" style="width: 500px; height: 500px;"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false&language=ru" type="text/javascript"></script>
    <script type='text/javascript'>
        //Загружаем карту в Html
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(62.0236, 129.7318),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //Создаем маркер в позиции объекта
        var marker;
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(62.0236, 129.7318),
            map: map
        });

        //Ловим нажатие мышки по карте
        google.maps.event.addListener(map, 'click', function (event) {
            var lat = event.latLng.lat().toFixed(4);
            var lng = event.latLng.lng().toFixed(4);
            //Двигаем курсор на карте
            marker.setPosition(new google.maps.LatLng(lat, lng));
        });

    </script>

<div id="object1">Тут блок 1</div>
<div id="object2">Тут блок 2</div>
<div id="object3">Тут блок 3</div>

<script>
//Можете создать через цикл если данных немного
document.getElementById("object1").addEventListener("mousemove", function() {
    marker.setPosition(new google.maps.LatLng(<?=$locations[0][0]?>,<?=$locations[0][1]?>));
});
document.getElementById("object2").addEventListener("mousemove", function() {
    marker.setPosition(new google.maps.LatLng(<?=$locations[1][0]?>,<?=$locations[1][1]?>));
});
document.getElementById("object3").addEventListener("mousemove", function() {
    marker.setPosition(new google.maps.LatLng(<?=$locations[2][0]?>,<?=$locations[2][1]?>));
});
</script>
11
  • спасибо, вроде понимаю как мне реализовать.... а вы не скажете как сделать так чтоб при наведения не только курсор двигался а еще и карту за ним???
    – Uman
    1 июн 2017 в 11:31
  • developers.google.com/maps/documentation/javascript/reference Почитайте, там написаны все методы, свойства и события для карты. Добавьте к вашим маркерам это map.setOptions({center: new google.maps.LatLng(62, 129)});
    – noxom
    1 июн 2017 в 12:02
  • сделал вот так, но так не работает google.maps.event.addListener(map, 'click', function (event) { var lat = event.latLng.lat().toFixed(4); var lng = event.latLng.lng().toFixed(4); //Двигаем курсор на карте marker.setPosition(new google.maps.LatLng(lat, lng)); marker.setOptions({center: new google.maps.LatLng(lat, lng)}); });
    – Uman
    1 июн 2017 в 13:51
  • click - Нажатие, для наведения мыши используйте "mousemove"
    – noxom
    1 июн 2017 в 14:47
  • а где это прописывать надо?? я js плохо знаю, сможете помочь???
    – Uman
    1 июн 2017 в 16:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.