在悬停链接或文本上显示google地图
在悬停链接或文本上显示google地图
提问于 2011-11-21 14:25:56
http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/我正在学习如何在文本上显示谷歌地图的教程。是的，看起来是这样，但是放错地方了。看，地图显示在页面的底部。当我悬停地图图像时，div本身与工作的div相比没有任何属性。
工作代码：
<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 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>我对div部分一无所知。请帮帮我！
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-21 15:42:43
以下是对我有效的方法：
<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>下面是实现这一点的jQuery：
// 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);
}Stack Overflow用户
发布于 2016-10-28 02:08:09
我知道这篇文章很旧，但我想如果有人偶然发现了这篇文章，并且正在寻找更新的例子，它可能会很有用。尽管答案中的代码运行良好，但它不是以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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8208043
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号