1

我目前正在使用优秀的geoxml3来解析本地 xml 和 kml 文件。我想尝试使 infowindows 更具吸引力（并添加选项卡），因此我尝试使用 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);
}

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

    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);
     }
    };

然后创建 infobubble 和监听器：

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.descriptions 加载到我的 infobubble 实例中，以便在单击标记（由 geoxml3 呈现）时显示它们？

提前感谢您的帮助！

4

1 回答 1

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)

工作示例

于 2014-03-26T05:40:39.360 回答