如何在geoxml3中使用信息气泡

Question

我目前正在使用出色的geoxml3来解析本地xml和kml文件。我想尝试并使信息窗口更有吸引力(也添加标签)，所以我试图使用infobubble脚本。可以在这里找到一个示例。

我用geoxml3创建了一个新的解析器，如下所示:

var urlArray =[];
urlArray.push("pathto/data.xml");
urlArray.push("pathto/data2.xml");
var myParser = new geoXML3.parser({
    map: map,
    processStyles: true,
    infoWindowOptions : {maxWidth: 450},
    zoom:true,
    singleInfoWindow: true,
    suppressInfoWindows: true,
    afterParse: useTheData  
});    
myParser.parse(urlArray);
}

，然后执行以下操作来检索标记对象和placemark描述

    function useTheData(doc) {
    geoXmlDoc = doc;
    for (var i = 0; i < doc[0].markers.length; i++) {
        var marker = doc[0].markers[i];
        var placemark = doc[0].placemarks[i];
        markerMouseclick(marker,placemarks.description);
     }
    };

，然后这个来创建信息泡泡和监听器:

var ib = new InfoBubble({
          shadowStyle: 1,
          padding: 10,
          backgroundColor: '#AECAE8',
          borderRadius: 15,
          arrowSize: 0,
          borderWidth: 1,
          borderColor: 'red',
          disableAutoPan: false,
          hideCloseButton: false,
          arrowPosition: 50,
          arrowStyle: 0,
          arrowSize: 15,
          ShadowStyle: 1,
          minWidth: 300,
          maxWidth: 500,
          minHeight: 300,
          maxHeight: 500
        });
  function markerMouseclick(newmarker, text) {
   google.maps.event.addListener(newmarker,'click', function(evt) {
     ib.setContent(text);
     ib.setPosition(evt.latLng);
     ib.setMap(map);
     ib.open()
   });
}

问题是现在的描述与标记不同步。我一直在寻找一种添加侦听器的方法，只是使用从dom json geoXML3文件通过geoXML3的placemmarks，但我还没有能够这样做，我找不到任何描述数据在标记分支。

我希望这是清楚的，尽管我使用的术语这些数据结构可能是不准确的。有人知道我如何将placemark .description加载到我的infobubble实例中，以便在单击标记(由geoxml3呈现)时显示它们吗?

提前感谢您的帮助!

Answer 1

我建议使用自定义createMarker函数来保存标记和信息窗口内容的闭包。

var ib = new InfoBubble({
          shadowStyle: 1,
          padding: 10,
          backgroundColor: '#AECAE8',
          borderRadius: 15,
          arrowSize: 0,
          borderWidth: 1,
          borderColor: 'red',
          disableAutoPan: false,
          hideCloseButton: false,
          arrowPosition: 50,
          arrowStyle: 0,
          arrowSize: 15,
          ShadowStyle: 1,
          minWidth: 300,
          maxWidth: 500,
          minHeight: 300,
          maxHeight: 500
        });
var M = null;
var P = null;
function I() {
 M = new google.maps.Map(document.getElementById('D'), {
  center: new google.maps.LatLng(43.31,-0.36),
  zoom: 14
 });
function I() {    
 M = new google.maps.Map(document.getElementById('D'), {
  center: new google.maps.LatLng(43.31,-0.36),
  zoom: 14
 });
 P = new geoXML3.parser({map:M, markerOptions: {
     icon:{
       url:'http://bus.w.pw/R.png',
       size:new google.maps.Size(9,9),
       anchor:new google.maps.Point(5,5)
     }
   }, 
   afterParse: S, 
   createMarker: CM, 
   suppressInfoWindows: true
 });
 P.parse('SO_20140226_bus_w_pw_TA.kml');
}
function S() {
 P.showDocument(P.docs[0]);
}
function CM(placemark) {
 var marker = P.createMarker(placemark);
 google.maps.event.addListener(marker, 'click', function(E) {
     ib.setContent('Description : ' + placemark.description+"<br>"+'Latitude & longitude : ' + E.latLng);
     // ib.setPosition(evt.latLng);
     // ib.setMap(map);
     ib.open(M,marker)
   });
 return marker;
}
google.maps.event.addDomListener(window, 'load', I)

工作示例