使用 onClick 事件显示不同的地图 - Google Maps V3。答案

【问题标题】：Display different maps with onClick event - Google Maps V3.使用 onClick 事件显示不同的地图 - Google Maps V3。
【发布时间】：2014-01-02 16:21:58
【问题描述】：

尝试根据点击事件显示 4 个不同的地图。虽然我确实发生了这种特殊的交互，但地图本身并没有正确居中，也无法实际将地图加载到中心SCREENSHOT HERE。

我目前设法做到这一点的方式有点像 hack，因为我在 JS 方面不是最棒的，而且在 Google 地图集成方面还相当新，所以如果代码是废话，请原谅。随意提供更好、更优雅的解决方案。

到目前为止，我已经这样做了： - 创建并初始化了四个不同的地图。 - 用关联地图绘制关联标记（用餐地图获取餐厅位置等）。 - 当点击相关的导航元素时，地图应该会显示（点击餐饮，餐饮地图显示）

这可行，但地图显示不正确。 LIVE DEMO。

HTML：

<section class="recommend-map">
      <div class="col-one">
        <h1>Recommends Map</h1>
        <ul>
            <li><a href="#" class="map-canvas">Map 1</a></li>
            <li><a href="#" class="map-canvas-2">Map 2</a></li>
            <li><a href="#" class="map-canvas-3">Map 3</a></li>
            <li><a href="#" class="map-canvas-4">Map 4</a></li>
          </ul>
      </div>
      <div class="col-two">
        <div class="content1" id="map-canvas" style="width: 550px; height: 300px;" data-location="javitz">
        </div>
        <div class="content2" id="map-canvas-2" style="width: 550px; height: 300px;" data-location="javitz">
        </div>  
        <div class="content3" id="map-canvas-3" style="width: 550px; height: 300px;" data-location="pier92">
        </div>
        <div class="content4" id="map-canvas-4" style="width: 550px; height: 300px;" data-location="pier94">
        </div>
      </div>
    </section>

JS：

function initialize() {
// removed actual array data for brevity, it was a lot. 

var dining = [
      ["Yankee Stadium",  40.829584,-73.927571],
      ["South Street Seaport", 40.70514,-74.008734],
      ["Musical", 40.762341,-73.978329],
      ["Frick collection!", 40.771385,-73.967171]
      ];

var drinks = [
     ["Central Park ", 40.78678,-73.966312],
     ["Broadway Shows",  40.765461,-73.984337],
     ["Broadway musicals", 40.762471,-73.970947],
     ["Musical", 40.736169,-74.001621]
     ];

var roofOutdoor = [
      ["The Ballet",  40.73495,-73.998671],
      ["Central Park",  40.78678,-73.966312],
      ["Broadway shows",  40.756685,-73.987813],
      ["Galapagos artspaace",   40.703871,-73.990924]
      ];

var leisure = [
        ["Chelsea Girl",  40.725169,-74.003005],
        ["What Goes Around Comes Around", 40.722925,-74.00323],
        ["The Library", 40.752166,-73.981708]
      ];

      var mapCenter = new google.maps.LatLng(40.75688,-73.984264);

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 12,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map3 = new google.maps.Map(document.getElementById('map-canvas-3'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var map4 = new google.maps.Map(document.getElementById('map-canvas-4'), {
          zoom: 13,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, marker2, marker3, marker4, i;



        // Map1 Markers
        for (i = 0; i < dining.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(dining[i][4], dining[i][5]),
            map: map
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent("<h1>" + dining[i][0] + "</h1><p>" + dining[i][1] + "</p><p>" + dining[i][2] + "</p><p>" + dining[i][3] + "</p>");
              infowindow.open(map, marker);
            }
          })(marker, i));
        }

        // Map2 Markers
        for (i = 0; i < drinks.length; i++) {
          marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(drinks[i][1], drinks[i][2]),
            map: map2
          });

          google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
            return function() {
              infowindow.setContent(drinks[i][0]);
              infowindow.open(map2, marker2);
            }
          })(marker2, i));
        }

        // Map3 Markers
        for (i = 0; i < roofOutdoor.length; i++) {
          marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(roofOutdoor[i][1], roofOutdoor[i][2]),
            map: map3
          });

          google.maps.event.addListener(marker3, 'click', (function(marker3, i) {
            return function() {
              infowindow.setContent(roofOutdoor[i][0]);
              infowindow.open(map3, marker3);
            }
          })(marker3, i));
        }

        // Map4 Markers
        for (i = 0; i < leisure.length; i++) {
          marker4 = new google.maps.Marker({
            position: new google.maps.LatLng(leisure[i][1], leisure[i][2]),
            map: map4
          });

          google.maps.event.addListener(marker4, 'click', (function(marker4, i) {
            return function() {
              infowindow.setContent(leisure[i][0]);
              infowindow.open(map4, marker4);
            }
          })(marker4, i));
        }
      }

      google.maps.event.addDomListener(window, 'load', initialize);

});

【问题讨论】：

为什么不使用一张地图，只显示你想要的标记？
@putvande 这也可以。但我想我必须切换链接以删除/显示正确的标记。不知道我将如何开始实施。我想我可以将隐藏/显示绑定到特定按钮。

标签： javascript jquery html google-maps google-maps-api-3

【解决方案1】：

我以前做过。

我在客户端 JS 中使用了 jquery。

HTML 首先，我会尝试同时渲染所有地图。是的。简单地让它们都可见，以便它们相互推动。

CSS 第二，你有“位置：绝对；”试试“位置：内联块；”

JS 最后，

调用 "$("SELECTOR NAME").hide();"在 JS 代码顶部您想要隐藏的 3 个地图上。

然后 "$("SELECTOR NAME").toggle();"打开或关闭其他的。

原因：我相信现在发生的事情是您有 3 个最初隐藏的地图生成，这样当客户端加载页面时 DOM 实际上并没有生成的内容。生成的 DOM 对象需要委托操作。第一张地图可以正常工作，因为它使用 DOM 生成。

今晚我可以给你一个实际的代码示例，对不起，我正在工作。

【讨论】：

没有position: inline-block 这样的东西。我想你的意思是display: inline-block？
哎呀，是的！位置：相对；显示：内联块；或者只是阻止
我现在会玩这个。让你知道它是怎么回事。虽然，当您下班回家时，我不介意查看代码示例。谢谢！

【解决方案2】：

您可以简单地拥有 1 个谷歌地图并在其上取消设置和设置标记。使用marker.setMap(null) 从地图上取消设置标记。您必须在数组中跟踪这些标记。

类似这样的：

var markers = []; // To keep all markers
// array can be your array of 'dining', 'drinks', 'roofOutdoor' or 'leisure' which you could set by clicking on your a tag.

function setMarkers (array) {
    $.each(markers, function (index, marker) {
        // unset marker (they will be removed from the map)
        marker.setMap(null);
    });

    if (array !== undefined) {
        var bounds = new google.maps.LatLngBounds();
        $.each(array, function (index, value) {
            var pos = new google.maps.LatLng(value[1], value[1]);
            bounds.extend(pos);
            var marker = new google.maps.Marker({
                position: pos,
                map: map
            });
            markers.push(marker);

        });
        map.fitBounds(bounds);
    }
}

我添加了 bounds 只是为了转到标记，以便您确定它们已添加到地图中。

HTML：

<a href="javascript:;" onclick="setMarker(dining);">Show dining markers</a>

希望这会有所帮助。

【讨论】：

超级有帮助。执行地图/标记的好方法。我会实施并告诉你进展如何。
只是好奇我如何将它集成到 Google 地图的整体 JS 中？它是否设置在启动每个数组索引的循环的 for 循环中？或者这是一个单独的功能？现在玩它，但不确定。刚刚在 for 循环和整个初始化函数之外尝试使用它，我得到的错误是单击时。 setMakers() 没有定义？

【解决方案3】：

如果您想以相同的方式实现它，这里有一个解决方案。

这是第二张地图的按钮

<button id="map2">map2</button>

一些内联 js 隐藏地图 2 3 4 并保留 1 呈现

$('#2,#3,#4').hide();

这将在 id="2" 的 div 之间显示一些内容，并隐藏父元素中的所有其他内容

$("#map2").click(function() {
    $('#2').show().siblings().hide();
});

这是您的地图容器

<div class="map" id="2"> your map here </div>

因此，如果您希望大部分内容保持原样，这是最简单的。尽管效率低下，如果您超出限制，它可能会导致 Google 停止解析您的 API 请求。（他们确实限制了他们每天服务的请求数量）

putvade 的解决方案要优雅得多。你应该肯定使用他的解决方案：P

【讨论】：

【解决方案4】：

感谢@MatUtter，我找到了解决方案。

老实说，这是一个非常糟糕的 hack。通常他们不会和我坐得很好。但目前我需要一些“有效”的东西，因为我正在进行站点范围的重构（对公司来说是的）。

基本上，我意识到（感谢@MatUtter）是在运行 $("SELECTOR").hide();它正在从 DOM 中删除一个元素。正如它应该的那样，但是谷歌地图很难重新绘制地图，因为它最初在那里，然后被删除，然后重新绘制。至少这是我对它的理解。

所以现在，我选择了每个地图元素，并使用“可见性：隐藏”隐藏它们，因为这将允许每个地图保持其在 DOM 中的位置，但将它们从视图中移除。单击每个相关链接后，它会显示相应的地图。

这肯定是个 hack，但现在可以了。感谢大家的帮助！

The most recent version of the site is here，如果您有任何其他反馈或重构，您认为最好告诉我。我总是对修改持开放态度，今年是 JS 的一年，所以我很高兴学习 :)

【讨论】：