Question

我目前正在使用优秀的geoxml3来解析本地xml和kml文件。我想尝试让infowindows更具吸引力（并且还添加标签），所以我尝试使用信息块脚本。可以找到它的外观示例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);
}

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

    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文档中的地标的监听器，但是我无法这样做而且我无法在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

如何使用geoxml3使用infobubble

1 个答案: