Question

我想设置我的网站，以便每当用户将鼠标悬停在地址上时，会弹出该地址的小型Google地图。我一直在阅读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, Oakland, CA
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

然而，这会导致地图显示在map_canvas div中...我真正想要的是让地图显示为一个小弹出窗口，有点像工具提示。我怎么能做到这一点？另外，如何设置它以便当用户鼠标移出时，地图会消失？

到目前为止，我正在使用html和javascript，我的网站是在coldfusion中。

Answer 1

您要做的是将map_canvas div的CSS设置为display:none。通过这种方式，您可以完全控制使用javascript实际显示的时间。完成后，只需针对鼠标悬停div定位hover事件即可。你可能想要做这样的事情。首先请务必将鼠标悬停div onmouseout事件

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

</div>

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

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'
}

我知道这并没有实现您理想的“工具提示”方案，但我希望这可以帮助您入门。看看this tooltip library。我之前使用过它，它可以很容易地将任何div变成工具提示。从那里，你应该是金色的。快乐的编码！

Answer 2

将map_canvas设置为具有边框并且看起来像一个单独的窗口在鼠标悬停时更改map_canvas（或任何你想要粘贴的iframe）x，y以匹配mouseOver x，y。
设置mapcanvas.style.display =“none”;在mouseout上

Answer 3

你可以使用一些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, New York, United States&iwloc=A&output=embed&ie=UTF8"></iframe>

Answer 4

在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() }, function(results, 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对象，而不是每次都重新创建它。此外，我使用结果中的bounds代替location，因为在我看来这更为可取。

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

4 个答案: