谷歌地图 - 点击引脚后标记部分

Question

我有2面的页面 -

一方面我有部分。每个人都是旅行中的一天，其中包含文本和位置。另一方面，我有一个带有引脚的谷歌地图，引用了各个部分。

我想允许用户点击图钉，页面将滚动到相关部分，并用背景颜色绘制部分。

Ans也相反 - 当用户点击某个部分而不是相关的引脚会改变他的颜色。

我不确定如何使用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>

Answer 1

我刚做了一个基本的演示。

主要想法是panTo()标记和scrollTop()到您点击的日期块。

编辑：在日信息数组中包含标题和内容。现在你可以在infowindow建立你想要的东西了。

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>