Question

我需要一个工作示例或解决方案来悬停kml多边形并显示信息气球 - 而不是单击时执行此操作。它可行吗？

例如，在此地图上，不是在点击时显示信息气球，而是在鼠标悬停时执行：

http://www.geocodezip.com/geoxml3_test/geoxml3_test_polygon.html

Obs。：我的kml文件在Placemark =＆gt;中有其他信息ExtendedData（如果这有任何帮助）。

tks：）

Answer 1

以下示例使用InfoBubble作为“工具提示”（仅处理多边形）：

<!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>

working example

鼠标悬停时geoxml3 kml多边形工具提示而不是单击

1 个答案: