带有多个信息窗口的Google地图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有多个信息窗口的Google地图相关的知识,希望对你有一定的参考价值。

  1. <div id="gloveMap" style="height:400px;width:320px;display:block;">
  2. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  3. </script>
  4. <script type="text/javascript">
  5. function mapIt(){
  6.  
  7. var latlng = new google.maps.LatLng(36.728058, -108.218686);
  8. var myOptions = {
  9. zoom: 11,
  10. center: latlng,
  11. mapTypeId: google.maps.MapTypeId.ROADMAP,
  12. }
  13. var map = new google.maps.Map(document.getElementById('gloveMap'), myOptions);
  14. setMarkers(map, places);
  15. }
  16.  
  17. var places = [
  18. ['Station 1', 36.732281, -108.211212],
  19. ['Station 2',36.764225,-108.148329],
  20. ['Station 3',36.738504,-108.229113],
  21. ['Station 4',36.723368,-108.168837],
  22. ['Station 5',36.75534,-108.197532],
  23. ['Station 6',36.734918,-108.249559],
  24. ['The Daily Times',36.730449,-108.206899],
  25. ];
  26.  
  27. var popUps = [
  28. '<strong>Farmington Fire Station 1</strong><br />301 N. Auburn',
  29. '<strong>Farmington Fire Station 2</strong><br />3800 English Road',
  30. '<strong>Farmington Fire Station 3</strong><br />1401 W. Navajo',
  31. '<strong>Farmington Fire Station 4</strong><br />790 S. Hutton',
  32. '<strong>Farmington Fire Station 5</strong><br />609 E. 30th',
  33. '<strong>Farmington Fire Station 6</strong><br />3101 W. Main',
  34. '<strong>The Daily Times</strong><br />301 N. Allen'
  35. ]
  36.  
  37.  
  38. var infowindow;
  39. function setMarkers(map, locations) {
  40.  
  41. for (var i = 0; i < places.length; i++) {
  42. var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  43. var marker = new google.maps.Marker({
  44. position: myLatLng,
  45. map: map,
  46. title: locations[i][0],
  47. });
  48. (function(i, marker) {
  49. google.maps.event.addListener(marker,'click',function() {
  50. if (!infowindow) {
  51. infowindow = new google.maps.InfoWindow();
  52. }
  53. infowindow.setContent(popUps[i]);
  54. infowindow.open(map, marker);
  55. });
  56. })(i, marker);
  57. }
  58. };
  59. mapIt();

以上是关于带有多个信息窗口的Google地图的主要内容,如果未能解决你的问题,请参考以下文章

多个 Google 地图和引导选项卡仅在窗口调整大小时呈现

在地图上显示多个标记时,单击标记时如何只打开一个信息窗口?

“未定义 Google”错误 - 尝试创建信息窗口 Google 地图

尝试使用通过EJS传递给客户端的数据绘制多个Google Map标记/信息窗口时,initMap()不是一个函数

Google Maps Android API v2 - 带有可点击按钮的信息窗口

点击侧边栏元素上的 Google 集群地图打开特定信息窗口