Hiển thị bản đồ google trên liên kết hoặc văn bản di chuột

http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ Tôi đang làm theo hướng dẫn này về cách hiển thị bản đồ google trên một văn bản. Có nó xuất hiện nhưng ở một nơi sai. Xem, bản đồ đang hiển thị ở cuối trang. Khi tôi di chuyển hình ảnh bản đồ, bản thân div không có thuộc tính nào so với ảnh bản đồ đang hoạt động.Hiển thị bản đồ google trên liên kết hoặc văn bản di chuột

đang làm việc:

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

Có gì trong trình duyệt của tôi:

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

Tôi bị mất trên một phần div. Xin vui lòng giúp đỡ!

Nguồn

2011-11-21 woninana

Đây là những gì làm việc cho tôi:

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

Đây là jQuery để làm cho nó xảy ra:

// 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); 
}

Nguồn

2011-11-21 07:42:42

Trong ví dụ hướng dẫn trên trang web của mình, anh ấy không thêm trình nghe chuột vào mã nhưng tôi đã tìm thấy t trong mã đầy đủ. –

Nó hoàn toàn hoạt động lần này. cảm ơn rất nhiều! – woninana

Tôi biết bài này là cũ nhưng tôi nghĩ rằng nó có thể có ích nếu có ai tình cờ gặp điều này và đang tìm kiếm một ví dụ cập nhật hơn. Mặc dù mã trong câu trả lời hoạt động tốt nhưng nó không được viết bằng một định dạng thân thiện với jQuery. Tôi cũng thấy rằng cách mà người nghe sự kiện được cấu hình khiến nó khó sử dụng. Cuối cùng, kích thước cố định của bản đồ chỉ không hoạt động trong thế giới đáp ứng ngày nay. Hy vọng điều này sẽ giúp một ai đó!

Thêm #mapHolder bất cứ nơi nào trong trang và phong cách nó bạn theo ý thích của bạn:

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

Đặt liên kết bất cứ nơi nào trong trang của bạn rằng bạn biết những gì để hiển thị bản đồ khi chuột di qua:

<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();    
});

Nguồn

2016-10-27 18:08:09 Austin

Hiển thị bản đồ google trên liên kết hoặc văn bản di chuột

Trả lời

Các vấn đề liên quan