当用户将鼠标悬停在某个地址上时，如何显示弹出式Google Map？
|
我想设置我的网站，以便每当用户将鼠标悬停在某个地址上时，就会弹出该地址的小谷歌地图。我一直在阅读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>
没有找到相关结果
已邀请:
4 个回复
茬贺努充尽
。这样，您就可以完全控制使用javascript实际显示它的时间。完成此操作后，只需将鼠标悬停div定位到事件即可。您可能想要做这样的事情。首先确保您将鼠标悬停在和事件上接下来，定位并显示函数中的，如下所示。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] } }); }函数将做到这一点。function hideMap(){ document.getElementById(\'map_canvas\').style.display = \'none\' }哩翔购
粟痢凰副
<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>鞋扣蚊冈借
(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(); }); })();和对象，而不是每次都重新创建它。另外，我使用结果中的ѭ17代替ѭ18，因为我认为它更可取。