当用户悬停在地址上时，如何显示弹出式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。

答

您要做的是将您的map_canvas div的CSS设置为display:none。这样，您就可以完全控制使用javascript实际显示的时间。一旦你这样做了，这只是针对你的mouseover 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' 
}

我知道这并不实现您理想的'tooltip'场景，但是我希望这可以让您开始。看看this tooltip library。我之前使用过它，它使得将任何div转换为工具提示变得非常简单。从那里，你应该是金。快乐的编码！

答

将map_canvas设置为具有边框并且看起来像单独的窗口。
在鼠标悬停上更改map_canvas（或任何要嵌入的iframe）x，y以匹配mouseOver x，y。
Set 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>

另外，为什么你需要使用完整的谷歌地图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>

答

大厦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地图？

相关推荐