Google地图API列表定位和网络链接

Question

我目前正在制作一个有多个标记的地图。地图下方是一个可点击的列表，单击该列表会转到相应的标记并显示标记的信息窗口。我想要帮助的是移动列表，使其位于左侧而不是下方的地图旁边。我想使列表可滚动，因为我将添加更多标记，因此将使列表更大。我需要帮助的第二件事是每个信息窗口内的链接。目前，当点击链接时，它会在地图内打开，而不是在我想要的新标签中打开。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  var gmarkers = [];
  function initialize() {
    var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(52.482615, -1.911246),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);

    var locations = [
      ['BMW<br>Address<br>Postcode<br>City<br><a href="https://www.sytnerbirminghambmw.co.uk/">Website</a>', 52.482615, -1.911246],
      ['Audi<br>Address<br>Postcode<br>City<br><a href="https://listers.co.uk/audi/birmingham">Website</a>', 52.3930665, -1.813306],
      ['Mercedes<br>Address<br>Postcode<br>City<br><a href="https://www.lshauto.co.uk/locations/1769/mercedes-benz-of-birmingham-central/">Website</a>', 52.4797319, -1.8775606],
      ['Porsche<br>Address<br>Postcode<br>City<br><a href="https://www.sytner.co.uk/porsche/dealer-locator/porsche-centre-solihull/">Website</a>', 52.391564, -1.803235],
      ['Ferrari<br>Address<br>Postcode<br>City<br><a href="https://birmingham.ferraridealers.com/en_gb/">Website</a>', 52.3916807, -1.8053753],
      ['Lamborghini<br>Address<br>Postcode<br>City<br><a href="https://www.birmingham.lamborghini/en">Website</a>', 52.5082516, -1.8182291]
    ];

    var marker, i;
    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, "click", function() {
      infowindow.close();
    });

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]),
        map: map
      });
      gmarkers.push(marker);

      google.maps.event.addListener(
        marker,
        "click",
        (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          };
        })(marker, i)
      );
    }
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br />
<a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br />

这是代码的jsfiddle

Answer 1

使地图占页面宽度的50％（或任何您想要的大小）。用overflow: auto漂浮侧栏。

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

proof of concept fiddle

代码段：

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

#googlemap {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
}

#sidebar {
  height: 500px;
  width: 50%;
  padding: 0px;
  margin: 0px;
  float: right;
  overflow: auto;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  var gmarkers = [];

  function initialize() {

    var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(52.482615, -1.911246),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);


    var locations = [
      ['BMW<br>Address<br>Postcode<br>City<br><a href="https://www.sytnerbirminghambmw.co.uk/">Website</a>', 52.482615, -1.911246],
      ['Audi<br>Address<br>Postcode<br>City<br><a href="https://listers.co.uk/audi/birmingham">Website</a>', 52.3930665, -1.813306],
      ['Mercedes<br>Address<br>Postcode<br>City<br><a href="https://www.lshauto.co.uk/locations/1769/mercedes-benz-of-birmingham-central/">Website</a>', 52.4797319, -1.8775606],
      ['Porsche<br>Address<br>Postcode<br>City<br><a href="https://www.sytner.co.uk/porsche/dealer-locator/porsche-centre-solihull/">Website</a>', 52.391564, -1.803235],
      ['Ferrari<br>Address<br>Postcode<br>City<br><a href="https://birmingham.ferraridealers.com/en_gb/">Website</a>', 52.3916807, -1.8053753],
      ['Lamborghini<br>Address<br>Postcode<br>City<br><a href="https://www.birmingham.lamborghini/en">Website</a>', 52.5082516, -1.8182291]
    ];



    var marker, i;
    var infowindow = new google.maps.InfoWindow();


    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });


    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]),
        map: map
      });
      gmarkers.push(marker);


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="sidebar">
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">BMW</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[1],'click');">Audi</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[2],'click');">Mercedes</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[3],'click');">Porsche</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[4],'click');">Ferrari</a> <br>
  <a href="javascript:google.maps.event.trigger(gmarkers[5],'click');">Lamborghini</a> <br>
</div>
<div id="googlemap"></div>