Карта google - отметьте раздел после щелчка

У меня страница с 2-х сторон -

С одной стороны у меня есть разделы. Каждый из них - это день в поездке, содержащий тексты и места. С другой стороны, у меня есть карта Google с контактами, которые относятся к разделам.

Я хотел бы разрешить пользователю нажимать на булавку, и страница будет прокручиваться до соответствующего раздела, а также закрасить этот раздел цветом фона.

Ответ также противоположный - когда пользователь нажимает на какой-либо раздел, соответствующий значок меняет свой цвет.

Не знаю, как это сделать с помощью Google-Maps ...

Это мой код сценария:

<!-- Google map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=fUA&callback=initMap" type="text/javascript"></script>
    <script type="text/javascript">
     var markers = [

            {
                "title": "Praho",
                "lat": "50.075538",
                "lng": "14.437801",
                "description": "Day: 1"
            }           
         , 
            {
                "title": "Český ráj",
                "lat": "50.586675",
                "lng": "15.157302",
                "description": "Day: 2"
            }           
         , 
            {
                "title": "Bešeňová",
                "lat": "49.100211",
                "lng": "19.434720",
                "description": "Day: 3"
            }           
            ];
    var infoWindows = []; // for open/close button

    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);   

    window.onload = function () {

        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });

            latlngbounds.extend(marker.position);

            // open popup by click
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            //


            // Open all popups
            var infowindow = new google.maps.InfoWindow({
                content: '<div id="iw-container">' +'<div class="iw-title">' + data.description + '</div>' + '</div>',
                maxWidth: 350
            });

        /*  google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.open(map, marker);
            });
        */  
            infowindow.open(map, marker);               
            //
            //Open/close infoWindow - Store all marker and infowindow in JSON array...
            var dict_map = {};
            dict_map['infoWinObj'] = infowindow;
            dict_map['markerObj'] = marker;

            //push JSON dict in array
            infoWindows.push(dict_map);               
            //  
        }
        map.setCenter(latlngbounds.getCenter());
    //  map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

    }

    function closeAllInfoWindows()
    {
        for (var i=0;i<infoWindows.length;i++) {
           if (infoWindows[i]['infoWinObj'])
              infoWindows[i]['infoWinObj'].close();
        }
    } 

    function openAllInfoWindows()
    {
        for (var i=0;i<infoWindows.length;i++) {                   
              infoWindows[i]['infoWinObj'].open(map, infoWindows[i]['markerObj']);
        }
    }   

    </script>
1
0
76
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я только что сделал базовую демонстрацию.

Основная идея - это маркер panTo() и scrollTop() для дневного блока, по которому вы щелкнули.

Изменить: включить тилты и контент в массив DayInfo. Теперь вы можете создавать то, что хотите, в информационном окне.

var map;
var StartPoint = new google.maps.LatLng(50, 10);

var DayInfo = [{
    ID: "day1",
    Title: "Title1",
    Content: "Content1",
    Location: new google.maps.LatLng(51.72977747627091, 6.605224609375),
  },
  {
    ID: "day2",
    Title: "Title2",
    Content: "Content2",
    Location: new google.maps.LatLng(52.78551578550006, 13.460693359375),
  },
  {
    ID: "day3",
    Title: "Title3",
    Content: "Content3",
    Location: new google.maps.LatLng(50.292175137097736, 14.32861328125),
  },
  {
    ID: "day4",
    Title: "Title4",
    Content: "Content4",
    Location: StartPoint
  }
]

var DaysMarker = [];

function initialize() {
  var mapOptions = {
    center: StartPoint,
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  DayInfo.forEach(function(dayInfo, index) {
    var marker = new google.maps.Marker({
      position: dayInfo.Location,
      map: map,
      isOpended: false,

      Open: function() {
        if (!this.isOpended) {
          this.infowindow.open(map, marker)
          this.isOpended = true
        }
        map.panTo(this.position)
      }
    })

    marker.infowindow = new google.maps.InfoWindow({
      content: '<div id="iw-container">' +
        '<h1>' + dayInfo.Title + '</h1>' +
        '<div class="iw-title">' +
        'Day' + (index + 1) + '<br>' +
        dayInfo.Content +
        '</div>' + '</div>',
      maxWidth: 350
    });

    marker.addListener('click', function() {
      if (this.isOpended) {
        this.infowindow.close()
        this.isOpended = false
      } else {
        this.Open()
        // var offsetTop = $('.day').get(index).offsetTop;
        $('html, body').animate({
          // scrollTop: offsetTop
          scrollTop: $('#' + dayInfo.ID).offset().top
        }, '500');
      }
    })

    DaysMarker.push(marker)
  })
}

$(function() {
  initialize()

  $('.day').on('click', function() {
    var index = $(this).index();
    DaysMarker[index].Open()
    // var offsetTop = $('.day').get(index).offsetTop;
    $('html, body').animate({
      // scrollTop: offsetTop
      scrollTop: $(this).offset().top
    }, '500');
  })
})
* {
  padding: 0;
  margin: 0;
}

body>div {
  position: relative;
  height: 100vh;
  vertical-align: top;
}

#map {
  width: 70%;
  position: fixed !important;
  right: 0;
  top: 0;
}

#days {
  margin-left: -4px;
  width: 30%;
  display: inline-block;
}

.day {
  height: 100vh;
  outline: 1px blue solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>


<div id="days">
  <div id="day1" class="day">Day1</div>
  <div id="day2" class="day">Day2</div>
  <div id="day3" class="day">Day3</div>
  <div id="day4" class="day">Day4</div>
</div>
<div id="map"></div>

Спасибо, а как насчет заголовка / описания каждого пина?

Roi 12.04.2018 14:10

Вот пример, показывающий, как установить заголовок и описание. Документ Google Map API

Hikarunomemory 12.04.2018 14:22

Но в моем коде я добавил заголовок к массиву - `var markers = [...]`. можно ли добавить заголовок к вашему - var Locations = [...]?

Roi 12.04.2018 16:00

Я только что отредактировал сообщение в соответствии с требованиями вашего комментария.

Hikarunomemory 12.04.2018 16:16

Большое спасибо! если я могу, то только одно последнее - в вашем коде, когда я нажимаю на булавку, страница прокручивается до правого div. вы используете для этого «индекс». это привет, но в моем коде я даю каждому разделу / разделу уникальный идентификатор. Могу ли я реализовать этот идентификатор в массиве var DayInfo = [..] и использовать его для отметки привязки скроллера?

Roi 12.04.2018 16:29

Да, вам просто нужно изменить метод прокрутки. Я закомментирую оригинал на случай, если кто-то предпочтет его использовать.

Hikarunomemory 12.04.2018 17:22

Спасибо! Я искренне признателен за вашу помощь ...!

Roi 12.04.2018 17:49

Другие вопросы по теме