ホバーリンクまたはテキスト上にGoogleマップを表示

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/私はテキストの上にGoogleマップを表示する方法についてこのチュートリアルに従っています。はい、それは間違った場所に表示されます。地図はページの下部に表示されています私がマップイメージを表示すると、div自体は、動作するものに比べて属性がありません。ホバーリンクまたはテキスト上にGoogleマップを表示

の作業コード：

<div style="position: absolute; left: 678px; top: 170px; z-index: 999; display: none; padding: 1px; margin-left: 5px; background-color: rgb(51, 51, 51); width: 302px; box-shadow: 0pt 1px 10px rgba(0, 0, 0, 0.5);"> 
<a target="new" href="http://maps.google.com/maps?q=Brookhaven, PA&z=11"> 
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=Brookhaven, PA&zoom=12&size=300x300&sensor=false&format=png&markers=color:blue|Brookhaven, PA"> 
</a> 
</div>

私のブラウザには何が：私はdivの部分に迷ってしまいました

<div style="display: none;"> 
<a target="new" href="http://maps.google.com/maps?q=4417 Edgmont Avenue, 19015&z=11"> 
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=4417 Edgmont Avenue, 19015&zoom=16&size=300x300&sensor=false&format=png&markers=color:blue|4417 Edgmont Avenue, 19015"> 
</a> 
</div>

。助けてください！

出典

2011-11-21 woninana

これは私のためにどのような作品です：

はここでそれを実現するためにjQueryの

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>jQuery Test Script</title> 
</head> 
<body> 
<span class="mapThis" place="600 Forbes Ave, Pittsburgh, PA 15282" zoom="16">Duquesne University</span> is located in the great town of <span class="mapThis" place="Pittsburgh, PA" zoom="12">Pittsburgh</span> in the great state of <span class="mapThis" place="Pennsylvania" zoom="6">Pennsylvania</span>. 
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script> 
<script src="scripts/test_script.js"></script> 
</body> 
</html>

：

// JavaScript Document 
$(document).ready(function() { 
var cursorX; 
var cursorY; 
if (window.Event) { 
    document.captureEvents(Event.MOUSEMOVE); 
} 
document.onmousemove = getCursorXY; 
$(".mapThis").each(function() { 
    var dPlace = $(this).attr("place"); 
    var dZoom = $(this).attr("zoom"); 
    var dText = $(this).html(); 
    $(this).html('<a onmouseover="mapThis.show(this);" style="text-decoration:none; border-bottom:1px dotted #999" href="http://maps.google.com/maps?q=' + dPlace + '&z=' + dZoom + '">' + dText + '</a>'); 
}); 
}); 
var mapThis=function(){ 
var tt; 
var errorBox; 
return{ 
    show:function(v){ 
    if (tt == null) { 
    var pNode = v.parentNode; 
    pPlace = $(pNode).attr("place"); 
    pZoom = parseInt($(pNode).attr("zoom")); 
    pText = $(v).html(); 
    tt = document.createElement('div'); 
    $(tt).html('<a href="http://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="http://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size=300x300&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>'); 
    tt.addEventListener('mouseover', function() { mapHover = 1; }, true); 
    tt.addEventListener('mouseout', function() { mapHover = 0; }, true); 
    tt.addEventListener('mouseout', mapThis.hide, true); 
    document.body.appendChild(tt);  
} 
fromleft = cursorX; 
fromtop = cursorY; 
fromleft = fromleft - 25; 
fromtop = fromtop - 25; 
tt.style.cssText = "position:absolute; left:" + fromleft + "px; top:" + fromtop + "px; z-index:999; display:block; padding:1px; margin-left:5px; background-color:#333; width:302px; -moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5);"; 
tt.style.display = 'block'; 
}, 
hide:function(){ 
tt.style.display = 'none'; 
tt = null; 
} 
}; 
}(); 
function getCursorXY(e) { 
cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
}

出典

2011-11-21 07:42:42

彼のサイトのチュートリアルの例では、彼はコードにマウスリスナーを追加しなかったが、私は完全なコードで。 –

今回は完全に動作します。どうもありがとう！ – woninana

私はこの記事が古いです知っているが、誰もが時につまずく場合、私はそれが役に立つかもしれないと思いましたこれはもっと更新された例を探しています。答えのコードはうまくいきますが、jQueryのフレンドリーな形式で書かれていません。私はまた、イベントリスナーが構成された方法が、使用が少し難しくなったことも発見しました。最後に、地図の固定サイズは今日の応答性の高い世界では機能しません。これが誰かを助けることを願って！

あなたの好みに合わせて、それをどこでもあなたのページで#mapHolderを追加し、スタイル：マウスオーバーしたときにマップを表示するにはどのようなどこにでもあなたのページで

<div id='mapHolder' style='whatever you want'></div>

場所へのリンク：

<a class="mapthis" place="properly formatted address" zoom="12">MAP</a>

のjQueryを：

$(document).on("mouseenter", ".mapthis", function(e) { 
    var desiredMapWidthPercent = .8; 
    var mapWidth = Math.round($(window).width() * desiredMapWidthPercent); 
    var aspectRatio = mapWidth/$(window).height(); 
    var mapHeight = Math.round($(window).height() * aspectRatio); 
    var boxWidth = mapWidth; 
    var boxHeight = mapHeight; 
    var scale = 1; 
    var pZoom = parseInt($(this).attr("zoom")); 
    var pPlace = $(this).attr("place"); 
    if((mapHeight > 640) || (mapWidth > 640)){ 
     mapHeight = Math.round(mapHeight/3.5); 
     mapWidth = Math.round(mapWidth/3.5); 
     scale = 2; 
     if(((mapHeight) > 1280) || ((mapWidth) > 1280)){ 
      mapHeight = 640; 
      mapWidth = 640; 
      boxWidth = 1280; 
      boxHeight = 1280; 
     }else{ 
      boxWidth = mapWidth * 2; 
      boxHeight = mapHeight * 2; 
     } 
    } 
    var fromleft = Math.max(0, ((($(window).width() - boxWidth)/2) + $(window).scrollLeft()))+'px'; 
    var fromtop = Math.max(0, ((($(window).height() - boxHeight)/2) + $(window).scrollTop()))+'px'; 
    var pText = $(this).html(); 
    $('#mapHolder').html('<a href="https://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="https://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size='+mapWidth+'x'+mapHeight+'&scale='+scale+'&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>'); 
    $('#mapHolder').css({position:'absolute',top:fromtop,left:fromleft, width:boxWidth, z-index:'999'}); 
    $('#mapHolder').show(); 
}); 
$(document).on("mouseleave", ".mapthis", function(e) { 
    if($(e.relatedTarget).closest('#mapHolder').length){ 
     $("#mapHolder").on("mouseleave", function(e) { 
      $('#mapHolder').hide(); 
     }); 
     return; 
    } 
    $('#mapHolder').hide();    
});

出典

2016-10-27 18:08:09 Austin

ホバーリンクまたはテキスト上にGoogleマップを表示

答えて

関連する問題