geodml3 kml多边形工具提示在鼠标悬停而不是点击 [英] geoxml3 kml polygon tooltip on mouseover instead of click
本文介绍了geodml3 kml多边形工具提示在鼠标悬停而不是点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一个工作示例或解决方案来悬停一个kml多边形并显示信息气球 - 而不是单击它。是否可行？
例如，在此地图上，不是在点击时显示信息气球，而是在鼠标悬停时完成：
http://www.geocodezip.com/geoxml3_test/geoxml3_test_polygon.html
Obs .:我的kml文件在Placemark => ExtendedData内有额外的信息（如果这有帮助的话）。
解决方案
这是一个使用 InfoBubble 为tooltip（只处理多边形）：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title>带多边形鼠标悬停文字的geoxml3示例< / title>
< style>
html {height：100％;}
body {height：100％; margin：0px; font-family：Helvetica，Arial;}
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js><<< ; /脚本>
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js>< / script>
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js>< / script>
< script type =text / javascript>
var geoXmlDoc = null;
var map = null;
jQuery（document）.ready（function（）{
var myOptions = {
center：new google.maps.LatLng（-19.5968657，-40.7717683），
zoom：6 ，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var geoXml = new geoXML3.parser（{
map：map，
singleInfoWindow：true，
afterParse：useTheData
}）;
geoXml.parse（ 'SO_unicef_test.kml'）;
}）;
函数useTheData（doc）{
//使用doc对象的JSON属性，地理数据处理进入此处
geoXmlDoc = doc;
for（var i = 0; i< doc [0] .placemarks.length; i ++）{
var placemark = doc [0] .placemarks [i];
polygonMouseover（placemark.polygon，placemark.name）;
jQuery（'＃map_text'）。append（doc [0] .placemarks [i] .name +'，'）;
}
};
var ib = new InfoBubble（{
shadowStyle：0，
padding：0，
backgroundColor：'white'，
borderRadius：4，
arrowSize ：0，
borderWidth：1，
borderColor：'black'，
disableAutoPan：true，
hideCloseButton：true，
arrowPosition：50，
arrowStyle ：0
}）;
function polygonMouseover（poly，text）{
google.maps.event.addListener（poly，'mouseover'，function（evt）{
ib.setContent（text）;
ib.setPosition（evt.latLng）;
ib.setMap（map）;
ib.open（）
}）;
google.maps.event.addListener（poly，'mouseout'，function（evt）{
ib.close（）
}）;
}
< / script>
< / head>
< body>
< form id =form1>
< div id =map_canvasstyle =width：600px; height：500px;>< / div>
< div id =map_text>< / div>
< / form>
< / body>
< / html>
I need an working example or a solution for hovering a kml polygon and showing the info balloon - instead of doing it on click. Is it doable?
For example, on this map, instead of showing the info balloon on click, doing it on mouse over:
http://www.geocodezip.com/geoxml3_test/geoxml3_test_polygon.html
Obs.: my kml file has additional info inside Placemark => ExtendedData (if that helps in any way).
tks :)
解决方案
Here is an example that uses InfoBubble for the "tooltip" (only handles polygons):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>geoxml3 example with polygon mouseover text</title>
<style>
html{height:100%;}
body{height:100%;margin:0px;font-family: Helvetica,Arial;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">
var geoXmlDoc = null;
var map = null;
jQuery(document).ready(function () {
var myOptions = {
center: new google.maps.LatLng(-19.5968657,-40.7717683),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
afterParse: useTheData
});
geoXml.parse('SO_unicef_test.kml');
});
function useTheData(doc) {
// Geodata handling goes here, using JSON properties of the doc object
geoXmlDoc = doc;
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i];
polygonMouseover(placemark.polygon,placemark.name);
jQuery('#map_text').append(doc[0].placemarks[i].name + ', ');
}
};
var ib = new InfoBubble({
shadowStyle: 0,
padding: 0,
backgroundColor: 'white',
borderRadius: 4,
arrowSize: 0,
borderWidth: 1,
borderColor: 'black',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 50,
arrowStyle: 0
});
function polygonMouseover(poly, text) {
google.maps.event.addListener(poly,'mouseover', function(evt) {
ib.setContent(text);
ib.setPosition(evt.latLng);
ib.setMap(map);
ib.open()
});
google.maps.event.addListener(poly,'mouseout', function(evt) {
ib.close()
});
}
</script>
</head>
<body >
<form id="form1">
<div id="map_canvas" style="width:600px;height:500px;"></div>
<div id="map_text"></div>
</form>
</body>
</html>
这篇关于geodml3 kml多边形工具提示在鼠标悬停而不是点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
