-2

我有谷歌地图..标记从xml获取数据..一切正常..但我想将信息从xml写入选项卡..但我不知道怎么做..请看我的代码..帮助我:((

          var gmarkers = [];
          var gicons = [];
           map = null;

var iconImage = new google.maps.MarkerImage('images/intake.png',

      new google.maps.Size(20, 34),

      new google.maps.Point(0,0),

      new google.maps.Point(9, 34));

  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));

  var iconShape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };

   var contentString = [

      '<div id="tabs">',

      '<ul>',

        '<li><a href="#tab-1"><span>Info</span></a></li>',
        '<li><a href="#tab-2"><span>Info</span></a></li>',
        '<li><a href="#tab-3"><span>Photo</span></a></li>',
      '</ul>',

      '<div id="tab-1">',

      ' i must add info here',

      '</div>',
      '<div id="tab-2">',

       '<p>and here</p>',

      '</div>',

      '<div id="tab-3">',

        '<p>Any info and photo will be here.. <br/> <img src="images/logo.gif" height="60" ></p>',
      '</div>',
      '</div>'
    ].join('');  

var infowindow = new google.maps.InfoWindow(
  { 

content: contentString

  });


      // A function to create the marker and set up the event window

function createMarker(latlng,name,html,category) {

    var contentString = html;

    var marker = new google.maps.Marker({

        position: latlng,
        icon: gicons[category],
        shadow: iconShadow,
        map: map,
        title: name,

        zIndex: Math.round(latlng.lat()*-100000)<<5

        });

        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;      

        marker.myname = name;

        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular category, and ensures the checkbox is checked ==

      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }

      }







  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(40.0000, 48.0000),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);


   google.maps.event.addListener(infowindow, 'domready', function() {
      $("#tabs").tabs();
    });


    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

这是xml 

      // Read the data

      downloadUrl("xml/cat.xml", function(doc) {

  var xml = xmlParse(doc);

  var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
         var address = markers[i].getAttribute("address");
          var id = markers[i].getAttribute("id");
          var name = markers[i].getAttribute("name");
          var html = contentString;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
        }


        // == show or hide the categories initially ==
        show("intake");
        hide("reservoir");
        hide("wps");
        show("wtp");
        hide("wwps");
        hide("wwtp");
        // == create the initial sidebar ==

      });


 toggleKML = function(x) { 
          i = x;
        //alert(i);
        //alert(toggleArray[0]);
        //alert(toggleArray[1]);
        //alert(toggleArray[2]);        
        if (toggleArray[i] == 1) {
        kmlArray[i].setMap(null);

        toggleArray.splice(i,1,'0');                  
        }
        else {
        kmlArray[i].setMap(map);

        toggleArray.splice(i,1,'1');        
        }
 }}
</script>

伙计们请帮助我（（..

我为此工作了超过 12 个小时，但它不起作用（（..

如何将 xml 数据放入 contentstring 中？

我的xml示例也是..

<marker code="20070" id="WWS7" name="8 Wells Nisaqala Gallery" title="NWSSP-2" capacity="9.84" completed="0" lat="xxx" lng="xx"  category="intake"/>
4

2 回答 2

0

我已经意识到你在问什么，你可以在这里查看我的代码：http: //turom-mice.it/condorincentive/incentive.html（使用 Firebug 获取脚本和相关的 XML 文件） 代码注释一样多尽可能，但如果您需要解释，请询问。代码是此处各种搜索和阅读以及 Google Maps v3 API/示例的结果。

希望能帮助到你。皮疹*

于 2012-10-23T13:57:25.743 回答
0

您需要根据标记上的点击事件来设置信息窗口的内容。您还需要最有可能使用闭包来执行此操作。现在，您每次都在设置相同的内容，因为contentString永远不会改变。您只需使用 XML 文件中的值在单击事件处理程序中设置该内容。

于 2012-10-22T15:04:29.390 回答