當用戶懸停在地址上時，如何顯示彈出式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。

來源

2011-03-24 froadie

您要做的是將您的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轉換爲工具提示變得非常簡單。從那裏，你應該是金。快樂的編碼！

來源

2011-03-24 15:03:10 Hacknightly

將map_canvas設置爲具有邊框並且看起來像單獨的窗口。
在鼠標懸停上更改map_canvas（或任何要嵌入的iframe）x，y以匹配mouseOver x，y。
Set mapcanvas.style.display =「none」;在mouseout上

來源

2011-03-24 15:03:22 owook

你可以使用一些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>

來源

2011-03-24 15:14:30 jamietelin

大廈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，因爲在我看來這是更可取的。

來源

2011-03-25 02:51:25 Haochi

當用戶懸停在地址上時，如何顯示彈出式Google地圖？

回答

相關問題