Google Map API V3 (五) Polygon添加鼠标悬浮TIP(闭包传参的活用)

happysoul

浏览: 401829 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

google map v3

google map v3 JavaScript html 谷歌地图地图

这里利用google的监听事件，增加鼠标悬浮，移动，移出的3个事件，为地图添加悬浮提示框
原因是默认只有marker上面才有悬浮显示
这里比较恶心的是调用不到系统的鼠标位置，显示的是 undefined，所以很无语的用了google的event['Ra']这个元素，里面有各种鼠标位置，如果是全屏还比较容易使用，但是对于地图来说，一般都是嵌在网页的某个位置，只能恶心的去判断位置了
这次没有用原来的方法精简代码，主要是能弄出来东西就好，调用什么的就交给别人去处理了

要说的是google的google.maps.event.addDomListener方法其实就是一个闭包的实现，给对象添加事件
但是常见的闭包传参很容易见到的是循环以后发现调用的时候永远都是显示最后一次负值的文本
这个是因为js加载的问题，先初始化所有的var变量，然后才会去加载function
此时变量在传入function的时候只会是最后一次赋值的参数会被调用到，作用域的问题，因为闭包调用不到外部参数值，具体的问题只要写过类似方法的人都会知道。

最后上图上代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>Polygon添加鼠标悬浮TIP</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
/*==========================================*/
#tooltip{
	float:left;
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
}
/*==========================================*/
</style>

<script type="text/javascript">

  function initialize() {
    var myLatLng = new google.maps.LatLng(39.142842478062505, 117.1966552734375);
    var myOptions = {
      zoom: 8,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var pg;

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

	var triangleCoords = google.maps.geometry.encoding.decodePath("sjttF{uxkUf|CyiK?uxJbnJoyCtvDivIpeGytA??duBidPnoCe~E`sG_fBzxFdwBa{Ah}Lps@~zKrbCn|S`hIbwB`mb@ogJrhBi}Lp{Tja@~kKkdPusL}sHv}Cys^|~g@r_Np~Yg|i@f`Z|c|@bwVufQtjQn`G?baV~lm@jvIloNvgeAstMnnMz}Fl|S_pSh}Lx_Dnq]a|Nnr@?baVk_`@d~EuwV{bH_oAsmTwcRsqG?rqGst[dPmbMhoFmn^tjDcsXelLq_FcsOd~JewBfcCmq]wuUe~EwnOdPsuB_iRwbJn|SoxTuqGyyOihCmxFsmTixFelLadN?");

    // Construct the polygon
    pg = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });

	//面加入页面中
	pg.setMap(map);


	/*==========================================*/
	pg.title="标题";	//这里是标题,Listener闭包无法读取,只能在外部给方法添加
	/*==========================================*/
	//pg 地图面
	//鼠标悬浮
	google.maps.event.addDomListener(pg, "mouseover", function(event){
		var myTitle = this.title;
	    var tooltip = "<div id='tooltip'>"+ myTitle +"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip").css({
			"top": (event['Ra'].pageY+21) + "px",
			"left": (event['Ra'].pageX+10)  + "px"
		}).show();
	});
	
	//鼠标离开
	google.maps.event.addDomListener(pg, "mouseout", function(){
		$("#tooltip").remove();
	});

	//鼠标移动
	google.maps.event.addDomListener(pg, "mousemove", function(event){
		$("#tooltip").css({
			"top": (event['Ra'].pageY+21) + "px",
			"left": (event['Ra'].pageX+10)  + "px"
		});
	});
	/*==========================================*/

  }
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" ></div>
</body>
</html>

----------------------- 2017-05 -------------------
当初偷懒用了他内置的方法，后来方法失效了也就一直没改

引用

//鼠标移动
google.maps.event.addDomListener(pg, "mousemove", function(event){
$("#tooltip").css({
"top": (event.y+21) + "px",
"left": (event.x+10) + "px"
});
});

大概是这样，由于现在谷歌用不了，补上这个留个念想吧。。。
具体获取鼠标的坐标自己根据浏览器再调整吧，印象中 +21 和 +10 是为了修正地图不精确的问题