0

我想在我的脚本中添加选项卡式信息窗口，但我不能......它不起作用。请帮我做这件事..

这是我的代码..我不知道我必须把字符串和事件监听器放在哪里工作....

   var gmarkers = [];
      var gicons = [];
       map = null;
var infowindow = new google.maps.InfoWindow(
  { 

content: contentString

  });

  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 = [   //  this my strings

      '<div id="tabs">',
      '<ul>',
        '<li><a href="#tab-1"><span>One</span></a></li>',
        '<li><a href="#tab-2"><span>Two</span></a></li>',
        '<li><a href="#tab-3"><span>Three</span></a></li>',
      '</ul>',
      '<div id="tab-1">',
        '<p>Tab 1</p>',
      '</div>',
      '<div id="tab-2">',
       '<p>Tab 2</p>',
      '</div>',
      '<div id="tab-3">',
        '<p>Tab 3</p>',
      '</div>',
      '</div>'
    ].join('');  

      // 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(infowindow, 'domready', function() {  //this my tab listener
      $("#tabs").tabs();
    });    

    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);
        }
      }
      // == rebuilds the sidebar to match the markers currently displayed ==
  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(map, 'click', function() {

        infowindow.close();

        });

// 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 name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          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("wsps");
        show("wtp");
        hide("wwps");
        hide("wwtp");
        // == create the initial sidebar ==   
      });
4

1 回答 1

0

您在其定义之前引用 contentString 。地方

 var infowindow = new google.maps.InfoWindow({
    content: contentString
});

后

var contentString=....
于 2012-10-22T09:36:42.963 回答