这里利用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 是为了修正地图不精确的问题
- 大小: 85.9 KB
分享到:
相关推荐
Silverlight中使用Polygon画五角星 Silverlight中使用Polygon画五角星 Silverlight中使用Polygon画五角星
Arcgis api for javascript(4.5版本) - 点击多边形(Polygon)并高亮显示
atl 实现 Polygon 鼠标点击变换多边形边个数 在网页嵌入显示atl 实现 Polygon 鼠标点击变换多边形边个数 在网页嵌入显示atl 实现 Polygon 鼠标点击变换多边形边个数 在网页嵌入显示atl 实现 Polygon 鼠标点击变换...
This Map pack expands out the Dungeons universe with new rooms and areas. Designed using POLYGON - Dungeons Pack as a base, this pack also comes with new assets specifically designed for the new areas...
资源来自pypi官网。 资源全名:polygon-api-client-0.0.3.tar.gz
Polygon.io PHP API客户端安装指南先决条件PHP> 7.2安装composer require polygon-io/api \PolygonIO\Rest\Rest类导出4个模块: 参考股票外汇交易加密货币<?phprequire __DIR__ . '/vendor/autoload.php';use ...
POLYGON – Modular Fantasy Hero Characters A low poly Modular Character asset pack to create characters for your fantasy game or make a character creator for your players to make their own hero. Key...
Polygon Mesh Processing 多边形网格处理绝对不容错过的经典书籍
多边形合并:使用 multiPolygon, polygon 方法进行合并,具体合并可以参考文章如下:https://zhuhukang.blog.csdn.net/article/details/133716577
根据一个Polygon类型的FeatureLayer中被选择的Polygon,得到它们的中心。并根据它们的中心点在Point型的FeatureLayer中新建Feature。 注:此代码非本人所写,本人使用后觉得有必要拿出来共享
canvas-polygon 使用Canvas API创建多边形
Polygon Cruncher v12.25 – Maya3DsMax模型优化插件.7z
Polygon3-3.0.8-cp38-cp38-win_amd64.whl
用opnGL 做的CUBE和polygon
Polygon Python 客户端 - WebSocket 和 RESTful API Polygon.io Python 客户端 入门 有关基本产品概述,请查看我们的 安装 pip install polygon-api-client polygon-api-client支持 python 版本 >= 3.6 简单的 ...
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片的完整代码;
Polygon3-3.0.8-cp35-cp35m-win32
资源分类:Python库 所属语言:Python 资源全名:Polygon3-3.0.8.win-amd64-py3.4.exe 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
google map 的开发API, 需要的朋友下载,可用。
polygon的制作 polygon的制作