如何在geoxml3中使用with气泡

Question

我目前正在使用优秀的geoxml3来解析本地xml和kml文件。其外观的一个示例可以在here中找到。

我用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()
   });

}

这样做的问题是描述现在与标记不同步。我一直在寻找一种仅使用geoXML3传递的dom json geoxml3文档中的placemarks来添加侦听器的方法，但我一直无法做到这一点，并且在markers分支中也找不到任何描述数据。

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

提前感谢大家的帮助！

Answer 1

我建议使用一个自定义的createMarker函数来保存标记和infowindow内容的闭包。

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)

working example