0

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

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

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

观察：我的 kml 文件在 Placemark => ExtendedData 中有其他信息（如果有任何帮助的话）。

tks :)

4

1 回答 1

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>

工作示例

于 2014-01-31T23:10:03.220 回答