文章/答案/技术大牛

发布

社区首页 >问答首页 >Google地图API列表定位和web链接

问Google地图API列表定位和web链接
EN

Stack Overflow用户

提问于 2019-02-16 01:05:52

回答 1查看 57关注 0票数 1

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

<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

css

html

google-maps-api-3

javascript

Stack Overflow用户

发布于 2019-02-16 03:16:24

将地图设置为页面宽度的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>

票数 0

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54713973

复制

相似问题

问Google地图API列表定位和web链接
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图API列表定位和web链接EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google地图API列表定位和web链接
EN