当用户将鼠标悬停在某个地址上时，如何显示弹出式Google Map？

如何解决当用户将鼠标悬停在某个地址上时，如何显示弹出式Google Map？

| 我想设置我的网站，以便每当用户将鼠标悬停在某个地址上时，就会弹出该地址的小谷歌地图。我一直在阅读Google Maps api文档，但是我很难找到一种简单的方法来实现此目的。看来我必须使用Google所谓的“地理编码”来根据地址查找纬度和经度...这是我到目前为止的测试页：

<!DOCTYPE html>
<html>
    <head>
        <Meta name=\"viewport\" content=\"initial-scale=1.0,user-scalable=no\" />
        <style type=\"text/css\">
          html { height: 100% }
          body { height: 100%; margin: 0px; padding: 0px }
          #map_canvas { height: 100% }
        </style>
        <script type=\"text/javascript\"
            src=\"http://maps.google.com/maps/api/js?sensor=false\">
        </script>
        <script type=\"text/javascript\">
            var geocoder;
            var map;

            function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { \'address\': address},function(results,status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                      zoom: 20,center: results[0].geometry.location,mapTypeId: google.maps.MapTypeId.SATELLITE
                    }
                    map = new google.maps.Map(document.getElementById(\"map_canvas\"),myOptions);
                  } else {
                    alert(\"Geocode was not successful for the following reason: \" + status);
                  }
                });
            }
        </script>
    </head>
<body>
    <div onMouSEOver=\"codeAddress(\'1405 Harrison Street,Oakland,CA\')\">
        1405 Harrison Street,CA
    </div>
    <div id=\"map_canvas\" style=\"width:100%; height:100%\"></div>
</body>
</html>

但是，这会使地图显示在map_canvas div中。我真正想要的是使地图显示为一个小弹出窗口，有点像工具提示。我该怎么做？另外，如何设置它，以便当用户将鼠标移出时，地图消失？到目前为止，我一直在使用html和javascript，而我的网站处于融合状态。

解决方法

您要做的是将map_canvas div的ѭ1设置为display:none。这样，您就可以完全控制使用javascript实际显示它的时间。完成此操作后，只需将鼠标悬停div定位到hover事件即可。您可能想要做这样的事情。首先确保您将鼠标悬停在div和onmouseout事件上

<div onMouseOver=\"codeAddress(\'1405 ...)\" onMouseOut=\"hideMap()\" >

</div>

接下来，定位并显示codeAddress函数中的div，如下所示。

function codeAddress(address) {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { \'address\': address},function(results,status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                      zoom: 20,center: results[0].geometry.location,mapTypeId: google.maps.MapTypeId.SATELLITE
                    }
                    map = new google.maps.Map(document.getElementById(\"map_canvas\"),myOptions);

                     // here\'s where you would want to show your map
                     // just use javascript to set the display style to block
                    document.getElementById(\"map_canvas\").style.display = \'block\'

                  } else {
                    ... [code here]
                  }
                });
            }

显然，您也想在离开div时隐藏地图，因此您的hideMap函数将做到这一点。

function hideMap(){
 document.getElementById(\'map_canvas\').style.display = \'none\'
}

我知道这不能实现理想的“工具提示”方案，但是我希望这可以帮助您入门。看看这个工具提示库。我以前用过它，并且可以很容易地将任何div转换为工具提示。从那里，你应该是金。编码愉快！ ,设置map_canvas的边框样式，使其看起来像一个单独的窗口。在鼠标悬停时，更改map_canvas（或要将其插入的任何iframe）x，y以匹配mouseOver x，y。设置mapcanvas.style.display = \“ none \”;在mouseout ,您可以使用某些jQuery在鼠标上轻松完成弹出窗口。查看以下jQuery函数： http://api.jquery.com/mouseover/ 想法是你做类似的事情：

<div id=\"adress1\" style=\"position:relative;\">
    72 MacDougal Street,New York,United States
    <div id=\"map_for_adress1\" style=\"display:none; position:absolute; top:0; left:0;\">
        <!--GOOGLE MAP,DIV for DATA or EMBED CODE-->
    </div>
</div>

<script type=\"text/javascript\">
$(\"#adress1\").mouseover(function() {

    //When mouse is over...
    $(\'#map_for_adress1\').show(0);

  }).mouseout(function(){

    //When mouse is not over...
    $(\'#map_for_adress1\').hide(0);

  });
</script>

另外，为什么需要使用完整的Google Maps API来显示地址地图？为什么不只是嵌入功能？就像是：

<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=72 MacDougal Street,United States&iwloc=A&output=embed&ie=UTF8\"></iframe>

,基于Banx的解决方案，我对脚本进行了如下修改：

(function(){
  var geocoder = new google.maps.Geocoder(),map = window.map = new google.maps.Map(document.getElementById(\"map_canvas\"),{
          zoom: 16,center: new google.maps.LatLng(38.92,-77.06),mapTypeId: google.maps.MapTypeId.ROADMAP
        }),canvas = $(\"#map_canvas\");

  $(\".address\").hover(function(){
    canvas.css({
      top: $(this).position().top,left: $(this).position().left
    }).show();
    geocoder.geocode( { \'address\': $(this).text() },status) {
      if (status == google.maps.GeocoderStatus.OK) {
          map.fitBounds(results[0].geometry.bounds);
      } else {
        // alert(\"Geocode was not successful for the following reason: \" + status);
      }
    });
  },function(){
    canvas.hide();
  });
})();

我使用jQuery处理那里的一些DOM内容，但是将其更改为正在使用的任何库（或不更改）应该非常容易。与Banx代码的主要区别在于它重用了map和geocoder对象，而不是每次都重新创建它。另外，我使用结果中的ѭ17代替ѭ18，因为我认为它更可取。

当用户将鼠标悬停在某个地址上时，如何显示弹出式Google Map？

如何解决当用户将鼠标悬停在某个地址上时，如何显示弹出式Google Map？

解决方法

相关推荐